ホームページ > ウェブフロントエンド > jsチュートリアル > js 要素トラバーサルを使用して要素トラバーサルを標準化する方法

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

php中世界最好的语言
リリース: 2018-06-02 14:41:39
オリジナル
1474 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート