ホームページ > 記事 > ウェブフロントエンド > DOM とノード、属性、検索ノードの概要
この記事では主に DOM、ノード、属性、ノードの検索方法について詳しく説明します。エディターに従って参照してください。それはあなたを助けることができます。
DOM (Document Object Modle) ドキュメントを操作するためのプログラミング インターフェイス
DOM は、ドキュメントを表現および変更するためのメソッドを定義します。js で DOM メソッドを使用して要素の CSS スタイルを変更することは、基本的には に追加することです。インラインスタイル。
DOM オブジェクトはホスト オブジェクトであり、HTML および XML 関数オブジェクトのコレクションを操作するために使用されます。 xml ——>
ドキュメントは、単独で記述された場合、ドキュメント全体を表し、暗黙的に html タグの上位層に記述され、html はドキュメント内のルート タグにすぎません。
注: BOM および DOM でグループ化されたものは、配列ではなく配列に似ています。
要素を取得するメソッド:
getElementById();
IE8 より前のブラウザでは、大文字と小文字の ID 値が区別されず、要素名の属性値と一致します。 id 値はバックグラウンドで変更されるため、使用しないようにするか、あまり使用しないようにしてください。
getElementsByTagName(); すべてのブラウザは
getElementsByClassName() をサポートします。古いバージョンでは、リクエストを送信できるタグの名前のみが有効になります。 (form, form element, img, iframe)
document.querySelector(); CSS セレクターは IE7 以前と互換性がなく、リアルタイムではありません。
document.querySelectAll();
ノードタイプ:
要素ノード1
属性ノード2
テキスト(テキスト)ノード3 // テキスト、スペース、改行などはすべてテキストノードです
Comment (コメント) ノード 8
ドキュメントノード 9
ドキュメントフラグメント 11
通過したノードの数:
parentNode は子ノードの親ノードであり、最後のparentNode ノードはドキュメントノードです。
childNodes 親ノードのすべての子ノード、要素ノード、コメントノード、テキストノード
firstChild 最初の子ノード
lastChild 最後の子ノード
nextSibling 次の兄弟ノード
previousSibling 前の兄弟ノード
traversal 要素ノードの数: (子ノードを除き、その他すべては IE9 以下と互換性がありません)
parentElement 要素の親要素ノード。最後の親要素ノードは html 要素であり、ドキュメントは自己完結型ノードです。
children は、親要素の下にある要素の子ノードです。
node.childElementCount === node.children.length 現在の子ノードの要素子ノードの数。 Children.length を使用します。
firstElementChild 最初の要素の子ノード
lastElementChild 最後の要素の子ノード
nextElementSibling、previousElemnetSibling
ノードの 4 つの属性:
nodeName 要素ノードに加えて、返される結果には先頭に「#」が付きます。ノードはタグ名を大文字で返し、タイプは読み取り専用です。
nodeValue はテキスト ノードとコメント ノードにのみ使用され、読み取りと書き込みが可能です。
nodeType は、対応するノード タイプを表す数値を返します。読み取り専用
attributes 要素ノードの属性コレクション。
node.hasChildNodes() メソッドは、親ノードに子ノードがあるかどうかを判断し、戻り結果はブール値です。
関連する推奨事項:
domを見つけるためのいくつかのjQueryメソッド
Reactは実際のDOMを操作して動的な下部吸引を実現します
インスタンス共有JQueryセレクター、DOMノード操作の練習
以上がDOM とノード、属性、検索ノードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。