JavaScript の新しい要素トラバーサルプロパティを使用して子要素をトラバースする方法を学びます

以前は、childNodes プロパティまたは firstChild を使用して子要素をトラバースできましたが、子要素が ELement 要素であるかどうかを判断する必要がありました。

その後、W3C は要素トラバーサル仕様を通じてトラバーサル用の新しい属性セットを定義しました。これにより、判断の必要がなくなり、非常に便利になりました。

1. ChildNodes属性のトラバーサル

子要素は通常、 childNodesプロパティを通じて走査されますが、このプロパティには空白ノードが含まれるため、 Element要素のみを走査する場合は非常に不便です。

次のコード例を参照してください。

<div class="article">

    <p>段落 1</p>

    <p>段落 2</p>

    <p>第3段落</p>

</div>

 

<script type="text/javascript">

    childList を document.querySelector(".article").childNodes とします。

    コンソールにログ出力します。

    // コンソール出力:

    // ノードリスト(7) 1

</スクリプト>

コンソールビュー効果:

子要素の空白ノードをトラバースします。

取得された子要素には、改行、インデント、スペースなどの空のtextノードが含まれます。

childList内の p 要素をトラバースする場合、実際にはこれがよく起こります。

次に、子要素が Element タイプであるかどうかを判断する必要があります。

childList を document.querySelector(".article").childNodes とします。

// 子要素をトラバースする childList.forEach((item, index) => {

    if (item.nodeType == 1) { // 要素タイプかどうかを確認します console.log(item);

    }

});

 

// コンソール出力:

// 3 p 要素

2. 要素シリーズ属性のトラバーサル

要素トラバーサルは、DOM 要素に 5 つのプロパティを追加します。

• 1. childElementCount : 子要素の数 ( nodeType=1 )。
• 2. firstElementChilde 、 Element型の最初の子要素を指します。
• 3. lastElementChilde 、 Element型の最後の子要素を指します。
• 4. previousElementSibling 、 Element型の前の兄弟要素を指します。
• 5. nextElementSibling 、 Element型の次の兄弟要素を指します。

これらの新しい属性を使用すると、 Element要素のトラバースがはるかに簡単になります。

上記の例を引き続き取り上げます。

// 最初の要素を取得します。let currentElement = document.querySelector(".article").firstElementChild;

// 子要素を走査します while (currentElement) {

    console.log(現在の要素);

    // 次の要素を取得します。currentElement = currentElement.nextElementSibling;

}

これにより、プロセスがより簡潔になります。

現在、IE9 以降とすべての最新ブラウザがこれらのプロパティをサポートしています。

これで、 JavaScriptを使用して新しいElement Traversal Element Traversal属性を使用して子要素をトラバースする方法についての説明は終わりです。関連コンテンツの詳細についてはJavaScript 123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。