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 サイトの他の関連記事を参照してください。