ParentNode 接口，ChildNode 接口

創(chuàng)新互聯(lián)主營泗洪網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,手機APP定制開發(fā),泗洪h5微信小程序搭建,泗洪網(wǎng)站營銷推廣歡迎泗洪等地區(qū)企業(yè)咨詢

節(jié)點對象除了繼承 Node 接口以外，還擁有其他接口。ParentNode接口表示當前節(jié)點是一個父節(jié)點，提供一些處理子節(jié)點的方法。ChildNode接口表示當前節(jié)點是一個子節(jié)點，提供一些相關(guān)方法。

ParentNode 接口

如果當前節(jié)點是父節(jié)點，就會混入了（mixin）ParentNode接口。由于只有元素節(jié)點（element）、文檔節(jié)點（document）和文檔片段節(jié)點（documentFragment）擁有子節(jié)點，因此只有這三類節(jié)點會擁有ParentNode接口。

ParentNode.children
children屬性返回一個HTMLCollection實例，成員是當前節(jié)點的所有元素子節(jié)點。該屬性只讀。

下面是遍歷某個節(jié)點的所有元素子節(jié)點的示例。

for (var i = 0; i < el.children.length; i++) {
 // ...
}

注意，children屬性只包括元素子節(jié)點，不包括其他類型的子節(jié)點（比如文本子節(jié)點）。如果沒有元素類型的子節(jié)點，返回值HTMLCollection實例的length屬性為0。

另外，HTMLCollection是動態(tài)集合，會實時反映 DOM 的任何變化。

ParentNode.firstElementChild

firstElementChild屬性返回當前節(jié)點的第一個元素子節(jié)點。如果沒有任何元素子節(jié)點，則返回null。

document.firstElementChild.nodeName
// "HTML"

上面代碼中，document節(jié)點的第一個元素子節(jié)點是。

ParentNode.lastElementChild
lastElementChild屬性返回當前節(jié)點的最后一個元素子節(jié)點，如果不存在任何元素子節(jié)點，則返回null。

document.lastElementChild.nodeName
// "HTML"

上面代碼中，document節(jié)點的最后一個元素子節(jié)點是（因為document只包含這一個元素子節(jié)點）。

ParentNode.childElementCount
childElementCount屬性返回一個整數(shù)，表示當前節(jié)點的所有元素子節(jié)點的數(shù)目。如果不包含任何元素子節(jié)點，則返回0。

document.body.childElementCount // 13

ParentNode.append()，ParentNode.prepend()

append方法為當前節(jié)點追加一個或多個子節(jié)點，位置是最后一個元素子節(jié)點的后面。

該方法不僅可以添加元素子節(jié)點，還可以添加文本子節(jié)點。

var parent = document.body;

// 添加元素子節(jié)點
var p = document.createElement('p');
parent.append(p);

// 添加文本子節(jié)點
parent.append('Hello');

// 添加多個元素子節(jié)點
var p1 = document.createElement('p');
var p2 = document.createElement('p');
parent.append(p1, p2);

// 添加元素子節(jié)點和文本子節(jié)點
var p = document.createElement('p');
parent.append('Hello', p);

注意，該方法沒有返回值。

prepend方法為當前節(jié)點追加一個或多個子節(jié)點，位置是第一個元素子節(jié)點的前面。它的用法與append方法完全一致，也是沒有返回值。

ChildNode 接口

如果一個節(jié)點有父節(jié)點，那么該節(jié)點就擁有了ChildNode接口。

ChildNode.remove()
remove方法用于從父節(jié)點移除當前節(jié)點。

el.remove()

上面代碼在 DOM 里面移除了el節(jié)點。

ChildNode.before()，ChildNode.after()
before方法用于在當前節(jié)點的前面，插入一個或多個同級節(jié)點。兩者擁有相同的父節(jié)點。

注意，該方法不僅可以插入元素節(jié)點，還可以插入文本節(jié)點。

var p = document.createElement('p');
var p1 = document.createElement('p');

// 插入元素節(jié)點
el.before(p);

// 插入文本節(jié)點
el.before('Hello');

// 插入多個元素節(jié)點
el.before(p, p1);

// 插入元素節(jié)點和文本節(jié)點
el.before(p, 'Hello');

after方法用于在當前節(jié)點的后面，插入一個或多個同級節(jié)點，兩者擁有相同的父節(jié)點。用法與before方法完全相同。

ChildNode.replaceWith()
replaceWith方法使用參數(shù)節(jié)點，替換當前節(jié)點。參數(shù)可以是元素節(jié)點，也可以是文本節(jié)點。

var span = document.createElement('span');
el.replaceWith(span);

上面代碼中，el節(jié)點將被span節(jié)點替換。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。