溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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
// "HTML"
上面代碼中，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節點替換。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
