要素トラバーサルは要素トラバーサルを詳細に実装します。

今回は、要素トラバーサルを実装するための要素トラバーサルの詳細な説明をお届けします。要素トラバーサルを実装するための注意事項は次のとおりです。

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

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

この仕様により、5 つの

属性が追加されます

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

要素間のスペースについて、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;
}

サポートされている Element Traversal の標準ブラウザは、IE9 以降、Filfox3.5 以降、Safari4 以降、Chrome および Opera10 以降です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Reactでdiffアルゴリズムを実装する方法

Vueは双方向データバインディング関数を実装します(コード付き)

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