js 要素トラバーサルを使用して要素トラバーサルを標準化する方法

今回は、js 要素トラバーサルを使用して要素トラバーサルを標準化する方法と、js 要素トラバーサルを使用して要素トラバーサルを標準化する際の注意点について説明します。実際のケースを見てみましょう。

要素間のスペースの場合、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-cli プロジェクトでブートストラップを使用する方法

Node.Js を使用してビットコイン アドレスを生成する方法

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