今天小編給大家分享一下的節點操作實例分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
節點概述
網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），在 DOM 中，節點使用 node 來表示。
HTML DOM 樹中的所有節點均可通過 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或刪除。
一般地，節點至少擁有 （節點類型）、 （節點名稱）和 （節點值）這三個基本屬性。
元素節點 為1
屬性節點 為2
文本節點 為3（文本節點包含文字、空格、換行等）
我們在實際開發中，節點操作主要操作的是元素節點。
節點層級
利用DOM樹可以把節點劃分為不同的層級關系，常見的是父子兄弟層級關系。
1.父級節點
node.
屬性可以返回某節點的父節點，注意是最近的一個父節點。
如果指定的節點沒有父節點則返回null。
????????????????<script>????????var?son?=?document.querySelector(".son");????????console.log(son.parentNode);????</script>
2.子節點
1.node. （標準）
node. 返回包含指定節點的子節點的集合，該集合為即時更新的集合。
????
????????- 我是li
????????- 我是li
????????- 我是li
????????- 我是li
????
????<script>????????var?ul?=?document.querySelector('ul');????????//?子節點childNodes?所有子節點，包含元素節點，文本節點等。????????console.log(ul.childNodes);????</script>
這里為什么有五個text節點呢，其實是對應五個換行，看下圖：
這五個換行是文本節點，加上四個li元素節點，共9個
注意：返回值里面包含了所有的子節點，包括元素節點，文本節點等。
如果只想要獲得里面的元素節點，則需要專門處理。所以我們一般不提倡使用 。
var?ul?=?document.querySelector('ul');for?(var?i?=?0;i
2.node. (非標準)
node. 是一個只讀屬性，返回所有的子元素節點。它只返回子元素節點，其余節點不返回（這個是我們重點掌握的）。
雖然 是一個非標準，但是得到了各個瀏覽器的支持，因此我們可以放心使用。
????????- 我是li
????????- 我是li
????????- 我是li
????????- 我是li
????
????<script>???????var?ul?=?document.querySelector('ul');???????console.log(ul.children);????</script>
3.第一個子節點和最后一個子節點
1.node.
2.node.
返回第一個子節點，找不到則返回 null ,同理。同樣，也是包含所有的節點。
3.node.
返回第一個子元素節點，找不到則返回 null 。
4.node.
返回最后一個子元素節點，找不到則返回 null 。
注意：這兩個方法有兼容性問題，IE9以上才支持。
5.node.[0]
5.node.[node.. - 1]
注意：實際開發的寫法，不存在兼容性問題。
????
????????- 我是li
????????- 我是li
????????- 我是li
????????- 我是li
????
????<script>???????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.node.
返回當前元素的下一個兄弟節點，找不到則返回 null 。同樣，也是包含所有的節點。
2.node.
返回當前元素上一個兄弟節點，找不到則返回null。同樣，也包含所有的節點。
3.node.
返回當前元素下一個兄弟元素節點，找不到返回 null 。
4.node. ng
ng 返回當前元素上一個兄弟元素節點，找不則返回 null 。
注意：這兩個方法有兼容性問題，IE9以上才支持。
那么如何封裝一個滿足兼容性，又可以找到兄弟元素節點的函數呢
???function?getNextElementSibling(element){???????var?el?=?element;???????while(el?=?el.nextSibling){???????????if(el.nodeType?==?1){???????????????return?el;???????????}???????}???????return?null;???}
上面這段封裝的代碼就可解決，但不必考慮太多，因為ie瀏覽器即將要停止服務了，所以你只要記住node. 這個就行，不必擔心兼容性問題。
創建節點
. (’ ＇)
. (）方法創建由 指定的Н TML 元素。因為這些元素原先不存在，是根據我的需求動態生成的，所以我們也稱為動態創建元素節點。
添加節點與添加節點
1.node. (child)
node. (）方法將一個節點添加到指定父節點的子節點列表末尾。類似 css 里面的 after 偽元素。
2.node.(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.(child)
node.(child) 方法從DOM中刪除一個子節點，返回刪除的節點。
????
????????- aniu
????????- marry
????????- tom
????
????<script>????????var?ul?=?document.querySelector("ul");????????ul.removeChild(ul.children[2]);????</script>
復制節點（克隆節點）
node. ()
node. ()方法返回調用該方法的節點的一個副本。也稱為克隆節點／拷貝節點
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>
以上就是“的節點操作實例分析”這篇文章的所有內容js增加節點和內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識js增加節點和內容，如果還想學習更多的知識，請關注長城資源網行業資訊頻道。
