JavaScript ParentNode 接口，ChildNode 接口

2023-03-20 15:48 更新

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

ParentNode 接口

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

ParentNode.children

children屬性返回一個(gè)HTMLCollection實(shí)例，成員是當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)。該屬性只讀。

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

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

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

另外，HTMLCollection是動(dòng)態(tài)集合，會(huì)實(shí)時(shí)反映 DOM 的任何變化。

ParentNode.firstElementChild

firstElementChild屬性返回當(dāng)前節(jié)點(diǎn)的第一個(gè)元素子節(jié)點(diǎn)。如果沒(méi)有任何元素子節(jié)點(diǎn)，則返回null。 

document.firstElementChild.nodeName
// "HTML"

上面代碼中，document節(jié)點(diǎn)的第一個(gè)元素子節(jié)點(diǎn)是<HTML>。

ParentNode.lastElementChild

lastElementChild屬性返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)元素子節(jié)點(diǎn)，如果不存在任何元素子節(jié)點(diǎn)，則返回null。 

document.lastElementChild.nodeName
// "HTML"

上面代碼中，document節(jié)點(diǎn)的最后一個(gè)元素子節(jié)點(diǎn)是<HTML>（因?yàn)?code>document只包含這一個(gè)元素子節(jié)點(diǎn)）。

ParentNode.childElementCount

childElementCount屬性返回一個(gè)整數(shù)，表示當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)的數(shù)目。如果不包含任何元素子節(jié)點(diǎn)，則返回0。 

document.body.childElementCount // 13

ParentNode.append()，ParentNode.prepend()

（1）ParentNode.append()

append()方法為當(dāng)前節(jié)點(diǎn)追加一個(gè)或多個(gè)子節(jié)點(diǎn)，位置是最后一個(gè)元素子節(jié)點(diǎn)的后面。

該方法不僅可以添加元素子節(jié)點(diǎn)（參數(shù)為元素節(jié)點(diǎn)），還可以添加文本子節(jié)點(diǎn)（參數(shù)為字符串）。 

var parent = document.body;

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

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

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

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

該方法沒(méi)有返回值。

注意，該方法與Node.prototype.appendChild()方法有三點(diǎn)不同。

  • append()允許字符串作為參數(shù)，appendChild()只允許子節(jié)點(diǎn)作為參數(shù)。
  • append()沒(méi)有返回值，而appendChild()返回添加的子節(jié)點(diǎn)。
  • append()可以添加多個(gè)子節(jié)點(diǎn)和字符串（即允許多個(gè)參數(shù)），appendChild()只能添加一個(gè)節(jié)點(diǎn)（即只允許一個(gè)參數(shù)）。

（2）ParentNode.prepend()

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

ChildNode 接口

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

ChildNode.remove()

remove()方法用于從父節(jié)點(diǎn)移除當(dāng)前節(jié)點(diǎn)。

el.remove()

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

ChildNode.before()，ChildNode.after()

（1）ChildNode.before()

before()方法用于在當(dāng)前節(jié)點(diǎn)的前面，插入一個(gè)或多個(gè)同級(jí)節(jié)點(diǎn)。兩者擁有相同的父節(jié)點(diǎn)。

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

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

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

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

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

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

（2）ChildNode.after()

after()方法用于在當(dāng)前節(jié)點(diǎn)的后面，插入一個(gè)或多個(gè)同級(jí)節(jié)點(diǎn)，兩者擁有相同的父節(jié)點(diǎn)。用法與before方法完全相同。

ChildNode.replaceWith()

replaceWith()方法使用參數(shù)節(jié)點(diǎn)，替換當(dāng)前節(jié)點(diǎn)。參數(shù)可以是元素節(jié)點(diǎn)，也可以是文本節(jié)點(diǎn)。

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

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


以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)