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

この記事では、javascript に関する関連知識を提供し、主に親ノード、子ノード、兄弟ノード、ノードの追加、削除、コピーなどのノード操作に関する関連問題を紹介します。以下の内容が皆様のお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

当社の Web ページ内, ノードの取得にはDOMが提供するメソッドを利用する以外に、ノードの階層関係を利用してノードを取得することもでき、比較的簡単なので今日はまとめてみましょう！

ノードの概要

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

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

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

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

ノード レベル

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

1. 親ノード

node.parentNode

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

<p>
        </p><p></p>
    
    <script>
        var son = document.querySelector(".son");
        console.log(son.parentNode);
    </script>

2. 子ノード

1.node.childNodes (標準)

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

        
• 我是li
        
• 我是li
        
• 我是li
        
• 我是li
    

    <script> var ul = document.querySelector(&#39;ul&#39;); // 子节点childNodes 所有子节点，包含元素节点，文本节点等。 console.log(ul.childNodes); </script>

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

これら 5 つの改行はテキスト ノードですプラス 4 つの li 要素ノード、合計 9

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

	var ul = document.querySelector('ul');
	for (var i = 0;i

2.node.children (非標準)

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

        
• 我是li
        
• 我是li
        
• 我是li
        
• 我是li
    

    <script> var ul = document.querySelector(&#39;ul&#39;); console.log(ul.children); </script>

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

1.node.firstChild
2.node.lastChild
firstChild は最初の子ノードを返します。見つからない場合は null を返します。lastChild にも同じことが当てはまります。同様に、すべてのノードが含まれます。

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

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

5.node.children[0]
5.node.children[node.children.length - 1]
注: 実際の開発方法には互換性がありません。問題。

rreeee

4.兄弟节点

1.node. nextSibling
nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null 。同样，也是包含所有的节点。
2.node. previousSibling
previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也包含所有的节点。
3.node. nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到返回 null 。
4.node. previousElementSibling
previousElementSibling 返回当前元素上一个兄弟元素节点，找不则返回 null 。
注意：这两个方法有兼容性问题，IE9以上才支持。

那么如何封装一个满足兼容性，又可以找到兄弟元素节点的函数呢

   function getNextElementSibling(element){
       var el = element;
       while(el = el.nextSibling){
           if(el.nodeType == 1){
               return el;
           }
       }
       return null;
   }

上面这段封装的代码就可解决，但不必考虑太多，因为ie浏览器即将要停止服务了，所以你只要记住node. nextElementSibling 这个就行，不必担心兼容性问题。

创建节点

document.createElement (’ tagName ＇)

document.createElenent (）方法创建由 tagName 指定的Н TML 元素。因为这些元素原先不存在，是根据我的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点与添加节点

1.node. appendChild(child)

node.appendChild (）方法将一个节点添加到指定父节点的子节点列表末尾。类似 css 里面的 after 伪元素。

2.node.insertBefore(child,指定元素)

    <script> var ul = document.querySelector("ul"); var li =document.createElement("li"); var span = document.createElement("span") ul.appendChild(li); ul.insertBefore(span,ul.children[0]); </script>

删除节点

node.removeChild(child)

node.removeChild(child) 方法从DOM中删除一个子节点，返回删除的节点。

        
• aniu
        
• marry
        
• tom
    

    <script> var ul = document.querySelector("ul"); ul.removeChild(ul.children[2]); </script>

复制节点（克隆节点）

node.cloneNode ()

node.cloneNode ()方法返回调用该方法的节点的一个副本。也称为克隆节点／拷贝节点
1．如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克降里面的子节点。
2．如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

        
• aniu
        
• marry
        
• tom
    

    <script> 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>

【相关推荐：javascript视频教程、web前端】

以上が1 つの記事で包括的な JavaScript ノード操作を説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。