Javascript ParentNode和ChildNode介面原理解析
ParentNode 介面，ChildNode 介面
節點物件除了繼承 Node 介面以外，還擁有其他介面。ParentNode介面表示當前節點是一個父節點，提供一些處理子節點的方法。ChildNode介面表示當前節點是一個子節點，提供一些相關方法。
ParentNode 介面
如果當前節點是父節點，就會混入了（mixin）ParentNode介面。由於只有元素節點（element）、文件節點（document）和文件片段節點（documentFragment）擁有子節點，因此只有這三類節點會擁有ParentNode介面。
ParentNode.children
children屬性返回一個HTMLCollection例項，成員是當前節點的所有元素子節點。該屬性只讀。
下面是遍歷某個節點的所有元素子節點的示例。
for (var i = 0; i < el.children.length; i++) {
// ...
}
注意，children屬性只包括元素子節點，不包括其他型別的子節點（比如文字子節點）。如果沒有元素型別的子節點，返回值HTMLCollection例項的length屬性為0。
另外，HTMLCollection是動態集合，會實時反映 DOM 的任何變化。
ParentNode.firstElementChild
firstElementChild屬性返回當前節點的第一個元素子節點。如果沒有任何元素子節點，則返回null。
document.firstElementChild.nodeName
上面程式碼中，document節點的第一個元素子節點是<HTML>。
ParentNode.lastElementChild
lastElementChild屬性返回當前節點的最後一個元素子節點，如果不存在任何元素子節點，則返回null。
document.lastElementChild.nodeName
// "HTML"
上面程式碼中，document節點的最後一個元素子節點是<HTML>（因為document只包含這一個元素子節點）。
ParentNode.childElementCount
childElementCount屬性返回一個整數，表示當前節點的所有元素子節點的數目。如果不包含任何元素子節點，則返回0。
document.body.childElementCount // 13
ParentNode.append()，ParentNode.prepend()
append方法為當前節點追加一個或多個子節點，位置是最後一個元素子節點的後面。
該方法不僅可以新增元素子節點，還可以新增文字子節點。
var parent = document.body;
// 新增元素子節點
var p = document.createElement('p');
parent.append(p);
// 新增文字子節點
parent.append('Hello');
// 新增多個元素子節點
var p1 = document.createElement('p');
var p2 = document.createElement('p');
parent.append(p1,p2);
// 新增元素子節點和文字子節點
var p = document.createElement('p');
parent.append('Hello',p);
注意，該方法沒有返回值。
prepend方法為當前節點追加一個或多個子節點，位置是第一個元素子節點的前面。它的用法與append方法完全一致，也是沒有返回值。
ChildNode 介面
如果一個節點有父節點，那麼該節點就擁有了ChildNode介面。
ChildNode.remove()
remove方法用於從父節點移除當前節點。
el.remove()
上面程式碼在 DOM 裡面移除了el節點。
ChildNode.before()，ChildNode.after()
before方法用於在當前節點的前面，插入一個或多個同級節點。兩者擁有相同的父節點。
注意，該方法不僅可以插入元素節點，還可以插入文字節點。
var p = document.createElement('p');
var p1 = document.createElement('p');
// 插入元素節點
el.before(p);
// 插入文字節點
el.before('Hello');
// 插入多個元素節點
el.before(p,p1);
// 插入元素節點和文字節點
el.before(p,'Hello');
after方法用於在當前節點的後面，插入一個或多個同級節點，兩者擁有相同的父節點。用法與before方法完全相同。
ChildNode.replaceWith()
replaceWith方法使用引數節點，替換當前節點。引數可以是元素節點，也可以是文字節點。
var span = document.createElement('span');
el.replaceWith(span);
上面程式碼中，el節點將被span節點替換。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。