jsの要素をトラバースする方法

今回は、jsで要素トラバーサルを行う方法と、jsで要素トラバーサルを行う際の注意点について説明します。以下は実際のケースです。

Element Traversal 仕様をサポートするブラウザには、IE 9 以降、Firefox 3.5 以降、Safari 4 以降、Chrome、Opera 10 以降が含まれます。

要素間のスペースの場合、IE9 より前ではドキュメント ノードは返されず、他のすべてのブラウザーはドキュメント ノードを返します。

既存の DOM 標準を変更せずにブラウザ間の違いに対応するために、Element Traversal 仕様が作成されました。

この仕様は要素に 5 つの属性を追加します

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

詳細な公式ドキュメント http://www.w3.org/TR/ElementTraversal/

要素間のスペースについては、IE9 より前のバージョンはテキスト ノードを返しませんが、他のブラウザはスペースをテキスト ノードとして返します。これにより、childNodes プロパティと firstChild プロパティを使用するときに一貫性のない動作が発生します。 DOM 仕様を変更せずにこの違いを補うために、W3C Element Traversal 仕様では新しい属性セットを定義しています。

Element Traversal API は、次の 5 つの属性を DOM 要素に追加します:

• childElementCount: 子要素の数を返します (テキスト ノードとコメントを除く)。

• firstElementChild: 最初の子要素を指します。

• lastElementChild: 最後の子要素を指します。

• previousElementSibling: 前の兄弟要素を指します。

• nextElementSibling: 次の兄弟要素を指します。

サポートされているブラウザでは、これらの属性が DOM 要素に追加されており、これらの要素を使用すると、空白のテキスト ノードを気にする必要がなく、DOM 要素を見つけるのが非常に便利になります。

これが例です。以前は、要素のすべての子要素をブラウザ間で走査したい場合、次のようなコードを記述する必要がありました:

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

Element Traversal の新しい属性を使用すると、コードは非常に簡潔になります:

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

あなたはそれを読みました。この記事の場合の方法はマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueを操作してプロキシを作成する方法

vueでv-cloakをロードする際のちらつきに対処する方法

以上がjsの要素をトラバースする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。