JavaScript的節(jié)點(diǎn)操作實(shí)例分析

今天小編給大家分享一下JavaScript的節(jié)點(diǎn)操作實(shí)例分析的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

節(jié)點(diǎn)概述

網(wǎng)頁(yè)中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等），在 DOM 中，節(jié)點(diǎn)使用 node 來(lái)表示。
HTML DOM 樹(shù)中的所有節(jié)點(diǎn)均可通過(guò) JavaScript 進(jìn)行訪問(wèn)，所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除。

一般地，節(jié)點(diǎn)至少擁有 nodeType （節(jié)點(diǎn)類(lèi)型）、 nodeName （節(jié)點(diǎn)名稱）和 nodeValue （節(jié)點(diǎn)值）這三個(gè)基本屬性。

• 元素節(jié)點(diǎn) nodeType 為1

• 屬性節(jié)點(diǎn) nodeType 為2

• 文本節(jié)點(diǎn) nodeType 為3（文本節(jié)點(diǎn)包含文字、空格、換行等）

我們?cè)趯?shí)際開(kāi)發(fā)中，節(jié)點(diǎn)操作主要操作的是元素節(jié)點(diǎn)。

節(jié)點(diǎn)層級(jí)

利用DOM樹(shù)可以把節(jié)點(diǎn)劃分為不同的層級(jí)關(guān)系，常見(jiàn)的是父子兄弟層級(jí)關(guān)系。

1.父級(jí)節(jié)點(diǎn)

node.parentNode

• parentNode屬性可以返回某節(jié)點(diǎn)的父節(jié)點(diǎn)，注意是最近的一個(gè)父節(jié)點(diǎn)。

• 如果指定的節(jié)點(diǎn)沒(méi)有父節(jié)點(diǎn)則返回null。

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

2.子節(jié)點(diǎn)

1.node.childNodes （標(biāo)準(zhǔn)）

node.childNodes 返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時(shí)更新的集合。

    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 子節(jié)點(diǎn)childNodes 所有子節(jié)點(diǎn)，包含元素節(jié)點(diǎn)，文本節(jié)點(diǎn)等。
        console.log(ul.childNodes);
    </script>

這里為什么有五個(gè)text節(jié)點(diǎn)呢，其實(shí)是對(duì)應(yīng)五個(gè)換行，看下圖：

這五個(gè)換行是文本節(jié)點(diǎn)，加上四個(gè)li元素節(jié)點(diǎn)，共9個(gè)

注意：返回值里面包含了所有的子節(jié)點(diǎn)，包括元素節(jié)點(diǎn)，文本節(jié)點(diǎn)等。
如果只想要獲得里面的元素節(jié)點(diǎn)，則需要專(zhuān)門(mén)處理。所以我們一般不提倡使用 childNodes 。

	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 (非標(biāo)準(zhǔn))

node.children 是一個(gè)只讀屬性，返回所有的子元素節(jié)點(diǎn)。它只返回子元素節(jié)點(diǎn)，其余節(jié)點(diǎn)不返回（這個(gè)是我們重點(diǎn)掌握的）。
雖然 children 是一個(gè)非標(biāo)準(zhǔn)，但是得到了各個(gè)瀏覽器的支持，因此我們可以放心使用。

	<ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
       var ul = document.querySelector('ul');
       console.log(ul.children);
    </script>

3.第一個(gè)子節(jié)點(diǎn)和最后一個(gè)子節(jié)點(diǎn)

1.node. firstChild
2.node. lastChild
firstChild 返回第一個(gè)子節(jié)點(diǎn)，找不到則返回 null ,lastChild同理。同樣，也是包含所有的節(jié)點(diǎn)。

3.node. firstElementChild
firstElementChild 返回第一個(gè)子元素節(jié)點(diǎn)，找不到則返回 null 。
4.node. lastElementChild
lastElementChild 返回最后一個(gè)子元素節(jié)點(diǎn)，找不到則返回 null 。

注意：這兩個(gè)方法有兼容性問(wèn)題，IE9以上才支持。

5.node.children[0]
5.node.children[node.children.length - 1]
注意：實(shí)際開(kāi)發(fā)的寫(xiě)法，不存在兼容性問(wèn)題。

    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
       var ul = document.querySelector('ul');
       // 1.不管是文本節(jié)點(diǎn)還是元素節(jié)點(diǎn)
       console.log(ul.firstChild);
       console.log(ul.lastChild);
       // 2.返回對(duì)應(yīng)的自元素節(jié)點(diǎn)，IE9以上才支持
       console.log(ul.firstElementChild);
       console.log(ul.lastElementChild);
       // 3.不存在兼容性問(wèn)題
       console.log(ul.children[0]);
       console.log(ul.children[ul.children.length - 1]);
    </script>

4.兄弟節(jié)點(diǎn)

1.node. nextSibling
nextSibling 返回當(dāng)前元素的下一個(gè)兄弟節(jié)點(diǎn)，找不到則返回 null 。同樣，也是包含所有的節(jié)點(diǎn)。
2.node. previousSibling
previousSibling 返回當(dāng)前元素上一個(gè)兄弟節(jié)點(diǎn)，找不到則返回null。同樣，也包含所有的節(jié)點(diǎn)。
3.node. nextElementSibling
nextElementSibling 返回當(dāng)前元素下一個(gè)兄弟元素節(jié)點(diǎn)，找不到返回 null 。
4.node. previousElementSibling
previousElementSibling 返回當(dāng)前元素上一個(gè)兄弟元素節(jié)點(diǎn)，找不則返回 null 。
注意：這兩個(gè)方法有兼容性問(wèn)題，IE9以上才支持。

那么如何封裝一個(gè)滿足兼容性，又可以找到兄弟元素節(jié)點(diǎn)的函數(shù)呢

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

上面這段封裝的代碼就可解決，但不必考慮太多，因?yàn)閕e瀏覽器即將要停止服務(wù)了，所以你只要記住node. nextElementSibling 這個(gè)就行，不必?fù)?dān)心兼容性問(wèn)題。

創(chuàng)建節(jié)點(diǎn)

document.createElement (’ tagName ＇)

document.createElenent (）方法創(chuàng)建由 tagName 指定的Н TML 元素。因?yàn)檫@些元素原先不存在，是根據(jù)我的需求動(dòng)態(tài)生成的，所以我們也稱為動(dòng)態(tài)創(chuàng)建元素節(jié)點(diǎn)。

添加節(jié)點(diǎn)與添加節(jié)點(diǎn)

1.node. appendChild(child)

node.appendChild (）方法將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。類(lèi)似 css 里面的 after 偽元素。

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

    <ul></ul>
    <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>

刪除節(jié)點(diǎn)

node.removeChild(child)

node.removeChild(child) 方法從DOM中刪除一個(gè)子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)。

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

復(fù)制節(jié)點(diǎn)（克隆節(jié)點(diǎn)）

node.cloneNode ()

node.cloneNode ()方法返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本。也稱為克隆節(jié)點(diǎn)／拷貝節(jié)點(diǎn)
1．如果括號(hào)參數(shù)為空或者為 false ，則是淺拷貝，即只克隆復(fù)制節(jié)點(diǎn)本身，不克降里面的子節(jié)點(diǎn)。
2．如果括號(hào)參數(shù)為 true ，則是深度拷貝，會(huì)復(fù)制節(jié)點(diǎn)本身以及里面所有的子節(jié)點(diǎn)。

     <ul>
        <li>aniu</li>
        <li>marry</li>
        <li>tom</li>
    </ul>
    <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的節(jié)點(diǎn)操作實(shí)例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。