1 つの記事で包括的な JavaScript ノード操作を説明

Web ページでは、DOM が提供するメソッドを使用してノードを取得するほかに、ノードの階層関係を使用してノードを取得することもできます。今日はそれらを簡単にまとめてみましょう。

ノードの概要

Web ページ内のすべてのコンテンツはノード (ラベル、属性、テキスト、コメントなど) であり、DOM ではノードはノードによって表されます。
HTML DOM ツリー内のすべてのノードには JavaScript を介してアクセスでき、すべての HTML 要素 (ノード) を変更、作成、または削除できます。

一般に、ノードには少なくとも 3 つの基本属性、nodeType (ノード タイプ)、nodeName (ノード名)、nodeValue (ノード値) があります。

• 要素ノードのnodeTypeは1、
• 属性ノードのnodeTypeは2、
• テキストノードのnodeTypeは3です（テキストノードにはテキスト、スペース、改行などが含まれます）

実際の開発では、ノード操作は主に要素ノードに対して行われます。

ノード レベルでは、

DOM ツリーを使用してノードをさまざまな階層関係に分割します。最も一般的なものは、親子、兄弟の階層関係です。

1. 親ノード

node.parentNodeparentNode

• 属性は、ノードの親ノードを返すことができます。これは最も近い親ノードであることに注意してください。
• 指定されたノードに親ノードがない場合は null を返します。

<p class="parent">
        <p class="son"></p>
    </p>
    <スクリプト>
        varson = document.querySelector(".son");
        console.log(son.parentNode);
    </script>

2. 子ノード

1.node.childNodes (標準)

node.childNodes は、指定されたノードの子ノードを含むコレクションを返します。このコレクションは、即時に更新されます。

<ul>
        <li>私はリーです</li>
        <li>私はリーです</li>
        <li>私はリーです</li>
        <li>私はリーです</li>
    </ul>
    <スクリプト>
        var ul = document.querySelector('ul');
        //子ノード childNodes 要素ノード、テキスト ノードなどを含むすべての子ノード。
        console.log(ul.childNodes);
    </script>

ここに 5 つのテキスト ノードがあるのはなぜですか? これらは実際には 5 つの改行に対応しています。以下の図を参照してください。

これら 5 つの改行はテキスト ノードであり、さらに 4 つの li 要素ノードの合計 9 つです。

注: 戻り値には、要素ノード、テキスト ノードなどを含むすべての子ノードが含まれます。
内部の要素ノードのみを取得したい場合は、特別に処理する必要があります。したがって、通常は childNode の使用を推奨しません。

var ul = document.querySelector('ul');
	for (var i = 0;i<ul.length;i++){
	    if (ul.childNodes[i].nodeType == 1){
	        console.log(ul.childNodes[i]);
	    }
	2.node.children

（非標準）

node.children は、すべての子要素ノードを返す読み取り専用プロパティです。子要素ノードのみが返され、他のノードは返されません (これが私たちが焦点を当てている点です)。
子供向けは非標準ですが、様々なブラウザに対応しているので安心して使えます。

<ul>
        <li>私はリーです</li>
        <li>私はリーです</li>
        <li>私はリーです</li>
        <li>私はリーです</li>
    </ul>
    <スクリプト>
       var ul = document.querySelector('ul');
       console.log(ul.children);
    </script>

3. 最初の子ノードと最後の子ノード

1.node。
2.node.lastChild
firstChild は最初の子ノードを返します。同じことが lastChild にも当てはまります。同様に、すべてのノードが含まれます。

3.node.firstElementChild
firstElementChild は、最初の子要素ノードを返します。見つからない場合は null を返します。
4.node.lastElementChild
lastElementChild は、最後の子要素ノードを返します。見つからない場合は null を返します。

注: これら 2 つの方法には互換性の問題があり、IE9 以降でのみサポートされます。

5.node.children[0]
5.node.children[node.children.length - 1]
※実際の開発記述方法との互換性は問題ありません。

<ul>
        <li>私はリーです</li>
        <li>私はリーです</li>
        <li>私はリーです</li>
        <li>私はリーです</li>
    </ul>
    <スクリプト>
       var ul = document.querySelector('ul');
       // 1. テキスト ノードか要素ノードか console.log(ul.firstChild);
       console.log(ul.lastChild);
       // 2. 対応する自己要素ノードを返します。IE9 以降のみがサポートします console.log(ul.firstElementChild);
       console.log(ul.lastElementChild);
       // 3. 互換性の問題はありません console.log(ul.children[0]);
       console.log(ul.children[ul.children.length - 1]);
    </script>

4.兄弟ノード

1.次の兄弟ノード。
nextSibling は、現在の要素の次の兄弟ノードを返します。見つからない場合は null を返します。同様に、すべてのノードが含まれます。
2.前の兄弟
previousSibling は、現在の要素の前の兄弟ノードを返します。見つからない場合は null を返します。同様に、すべてのノードが含まれます。
3.node.nextElementSibling
nextElementSibling は、現在の要素の次の兄弟要素ノードを返します。見つからない場合は、null を返します。
4.node.previousElementSibling
previousElementSibling は、現在の要素の前の兄弟要素ノードを返します。見つからない場合は null を返します。
注: これら 2 つの方法には互換性の問題があり、IE9 以降でのみサポートされます。

では、互換性を満たし、兄弟要素ノードを見つけることができる関数をカプセル化するにはどうすればよいでしょうか?

function getNextElementSibling(element){
       var el = 要素;
       while(el = el.nextSibling){
           if(el.nodeType == 1){
               エルを返します。
           }
       }
       null を返します。
   

上記のカプセル化されたコードは解決できますが、IE ブラウザーは間もなくサービスを停止するため、あまり考える必要はありません。そのため、次のノードを覚えておくだけでよく、互換性について心配する必要はありません

。

問題。

ノードの作成

document.createElement (' tagName ')

document.createElenent () メソッドは、tagName で指定された Н TML 要素を作成します。これらの要素は元々存在しておらず、ニーズに基づいて動的に生成されたため、 「要素ノードを動的に作成する」とも呼ばれます。

ノードの追加とノードの追加

1.node.appendChild(child)

node.appendChild() メソッドは、指定された親ノードの子ノード リストの末尾にノードを追加します。 CSS の after 疑似要素に似ています。

2.node.insertBefore(子、指定された要素)

<ul></ul>
    <スクリプト>
        var ul = document.querySelector("ul");
        var li =document.createElement("li");
        varspan = document.createElement("スパン")
        ul.appendChild(li);
        ul.insertBefore(span,ul.children[0]);
    </script>

ノードの削除

node.removeChild(child)

node.removeChild(child) メソッドは、DOM から子ノードを削除し、削除されたノードを返します。

<ul>
        <li>アニウ</li>
        <li>結婚してください</li>
        <li>トム</li>
    </ul>
    <スクリプト>
        var ul = document.querySelector("ul");
        ul.removeChild(ul.children[2]);
    </script>

ノードのコピー (クローン ノード)

node.cloneNode ()

node.cloneNode () メソッドは、このメソッドを呼び出したノードのコピーを返します。クローンノード/コピーノードとも呼ばれます
1.括弧パラメータが空または false の場合、浅いコピーになります。つまり、ノード自体のみが複製され、内部の子ノードは複製されません。
2.括弧パラメータが true の場合、それはディープ コピーであり、ノード自体とそのすべての子ノードがコピーされます。

<ul>
        <li>アニウ</li>
        <li>結婚してください</li>
        <li>トム</li>
    </ul>
    <スクリプト>
        var ul = document.querySelector("ul");
        var li1 = ul.children[0].cloneNode(); //浅いコピー var li2 = ul.children[0].cloneNode(true); //深いコピー ul.appendChild(li1);
        ul.appendChild(li2);
    </script>