DOM、ノード、属性、ノードの検索方法の詳細な紹介

以下は、DOM の概要と、ノード、属性、ノードの検索方法について説明したもので、非常に参考になります。

ドキュメントを操作するための DOM (Document Object Modle) プログラミング インターフェイス

DOM は、CSS スタイル シートを表現および変更するためのメソッドを定義します。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 // テキスト、スペース、キャリッジリターンなどはすべてテキストノードです

コメントノード 8

ドキュメントノード 9

ドキュメントフラグメント 11

トラバースノード数:

parentNode は子ノードの親ノードであり、最後のparentNode ノードはドキュメントノードです。 childNodes 親ノードのすべての子ノード、要素ノード、コメントノード、テキストノード firstChild 最初の子ノード

lastChild 最後の子ノード

nextSibling 次の兄弟ノード

previousSibling 前の兄弟ノード

要素の数走査されたノード:

(子ノードを除き、その他は IE9 以下と互換性がありません)

parentElement 要素の親要素ノード。最後の親要素ノードは html 要素であり、ドキュメントは自己完結型ノードです。 。 children は、親要素の下にある要素の子ノードです。 node.childElementCount === node.children.length 現在の子ノードの要素子ノードの数。 Children.length を使用します。

firstElementChild 最初の要素の子ノード

lastElementChild 最後の要素の子ノード

nextElementSibling、previousElemnetSibling

ノードの 4 つの属性:

nodeName 要素ノードに加えて、返される結果には ' # を先頭に置きます。' であり、要素ノードはタグ名を大文字で返し、型は読み取り専用です。 nodeValue はテキスト ノードとコメント ノードにのみ使用され、読み取りと書き込みが可能です。 nodeType は、対応するノード タイプを表す数値を返します。読み取り専用

attributes 要素ノードの属性コレクション。

node.hasChildNodes() メソッドは、親ノードに子ノードがあるかどうかを判断し、戻り結果はブール値です。

上記は私があなたのためにまとめたものです。

関連記事:

js

フロントエンドとバックエンド間での Json コードの相互転送を実現

$http サービス Post メソッド転送 json パラメータケースの詳細説明

よくある間違いとは初心者がJSを使って作りました

以上がDOM、ノード、属性、ノードの検索方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。