ドキュメントオブジェクトモデル＆クエリ選択

7313 ワード

webdev javascript beginners html テキストリンク

おい、皆さん👋🏻,
本稿ではJavaScriptのDocument Object Model(DOM)についての詳細な紹介を行います.これは私の初級JavaScriptシリーズの第11部です.

ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデル、またはDOM for Shortは、HTMLとXMLドキュメントのプログラミングAPIです.これは、ドキュメントの論理構造を定義し、ドキュメントのアクセス方法を操作します.したがって、本質的には、Webドキュメントに含まれるすべてのオブジェクトとプロパティの階層構造のビジュアル表現です.

少し深く潜りましょう

ドキュメントオブジェクトモデルの大きな画像を理解するには.我々のブラウザが最初にHTMLページをロードするとき、それは最初にそれを視覚表現にマップすることを理解する必要があります.したがって、基本的には、あなたと私が書いたHTMLコードを解析して、DOMと呼ばれる視覚的な階層表現を作成します.HTMLテンプレートで定義されている各要素は、このDOM構造の一部であるDOMオブジェクトにマップします.
したがって、ブラウザによって生成されるHTML DOMは、すべてのHTMLページ要素をDOMオブジェクトとして構成するツリー構造を構築します.
たとえば、以下のHTMLコードがブラウザに読み込まれると仮定します.

<!DOCTYPE html>
<html>
    <head>
        <title>This is some HTML page</title>
    </head>
    <body>
        <p class="element-one">I am a paragraph</p>
        <h1>I am an important element </h1>
    </body>
</html>

DOMにおける要素の問い合わせ

DOMの要素に対する問い合わせは、DOMセレクタを使用することができます.そこで、セレクタを使用してDOM内の要素を選択できる5つの方法を理解しましょう.

1章

GetElementsByTagNameメソッドは、指定したタグ名を持つ要素のHtmlCollectionを返します.ここでは、完全なドキュメントを検索します.ルートノードを含めて、特定のタグ名を含む要素を引数として渡すまで検索します.GetElementsByTagNameメソッドを使用することについての興味深いことは、返されるHtmlCollectionが有効であることを意味しています.つまり、同じメソッドを呼び出す必要がなく、DOMツリーと同期して自動的に更新されることを意味します.

// As an example, let us say we are looking for all the h1 elements
const elements = document.getElementsByTagName('h1');

2 .要素名

GetElementsByClassNameメソッドは、特定のクラスを持つ要素のライブHtmlCollectionを返します.ドキュメントオブジェクトで呼び出されると、ルートノードを含めて完全なドキュメントが検索されます.

// As an example, let us say we are looking for an element with the class of game
const games = document.getElementsByClassName('game');

getElementByid

GetElementByidは、id属性が我々が探しているIDと一致する要素オブジェクトを返します.私たちが知っているように、要素IDは指定されるならユニークである必要があるので、彼らは速く特定の要素への接近を得る役に立つ方法です.

// As an example, let us say we are looking for an element with id of username. Each HTML page can only have one such element that has the id that we are looking for. 
const username = document.getElementById('username');

問答者

QuerySelectorは、指定したセレクタまたはセレクタのグループに一致するドキュメント内の最初の要素を返します.マッチが見つからなかった場合、NULLが返される.

// As an example, let us say we are looking for an element with id of username. Each HTML page can only have one such element that has the id that we are looking for. 
const username = document.querySelector('#username');

問合せ

QuerysIelectorAllメソッドは、静的ではなく、指定したグループのグループに一致するドキュメント内のすべての要素のリストを表すLive Nodelistを返します.

// As an example, let us say we are looking all elements that have the class of user on it.
const users = document.querySelectorAll('.user'); // Static Non-Live Node List

それで、これはこれのためです.私は、ドキュメントオブジェクトモデルと質問選択に関しても同様にビデオを持っています.それで、あなたが興味があるならば、彼らをチェックしてください.
あなたがウェブ開発を学ぶために探しているならば、私は私のYouTubeチャンネルであなたのために無料のコースをキュレーションしました.