概述
- 节点对象除了继承Node接口外，还拥有其他接口。
ParentNode表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode表示当前节点是一个子节点，提供一些相关方法。
ParentNode
只有元素节点、文档节点、文档片段节点拥有子节点，因此只有这三类节点拥有ParentNode接口。
children
- 返回一个当前节点的所有
元素子节点的HTMLCollection实例，该属性只读。
<body>
<div>123</div>
<div>456</div>
</body>
document.body.children // HTMLCollection(2) [div, div]
firstElementChild
- 返回当前节点的
第一个元素子节点。如果没有则返回null。
console.dir(document.firstElementChild); // html
lastElementChild
- 返回当前节点的
最后一个元素子节点。如果没有则返回null。
console.dir(document.lastElementChild); // html
childElementCount
- 返回一个整数，表示当前节点的所有
元素子节点的数量，如果不包含则返回0。
console.log(document.childElementCount); // 1
append()
- 为当前节点追加一个或多个子节点(元素节点、文本节点)，位置是最后一个元素子节点的后面。没有返回值。
// 添加元素子节点
var p = document.createElement('p');
document.body.append(p);
// 添加文本子节点
parent.append('Hello');
// 添加元素子节点和文本子节点
var p = document.createElement('p');
parent.append('Hello', p);
prepend()
- 为当前节点追加一个或多个子节点，位置是第一个元素子节点的前面。其他与
append一致。
ChildNode
- 如果一个节点有父节点，那么该节点就拥有了
ChildNode接口。
remove()
- 从父节点移除当前节点。
<body>
<div>123</div>
<div>456</div>
</body>
let div = document.getElementsByTagName('div')[0]
div.remove()
// 移除后的DOM结构：
<body>
<div>456</div>
</body>
before()
- 在当前节点的
前面插入一个或多个同级节点(元素节点、文本节点)，两者拥有相同的父节点。
<body>
<div>123</div>
</body>
let div = document.getElementsByTagName('div')[0]
let p = document.createElement('p');
// 插入元素节点
div.before(p);
// 插入文本节点
div.before('aaaa')
// 添加后的DOM结构：
<body>
<p></p>
"aaaa"
<div>123</div>
</body>
after()
- 在当前节点的
后面插入一个或多个同级节点(元素节点、文本节点)，两者拥有相同的父节点。与before一致。
replaceWith()
- 使用参数节点（元素节点、文本节点）替换当前节点。
<div>123</div>
let div = document.getElementsByTagName('div')[0]
let p = document.createElement('p');
// p替换div
div.replaceWith(p);
<p></p>
