[toc]
# 每日英语
1. `collection` 收集/集合
2. `foreach` 循环
3. `entry/entries` 项目
4. `area` 区域
5. `map` 映射
6. `rectangular` 矩形
7. `coords` 坐标
# 什么是 NodeList 和 HTMLCollection
节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种节点集合，用于容纳多个节点：`NodeList` 和 `HTMLCollection`。
这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是 NodeList 实例或 HTMLCollection 实例。
主要区别是，`NodeList` 可以包含各种类型的节点，`HTMLCollection` 只能包含 HTML 元素节点。
# NodeList 接口
## 概述
`NodeList` 实例是一个类似数组的对象，它的成员是节点对象。通过以下方法可以得到 `NodeList` 实例。
- `Node.childNodes`
- `document.querySelectorAll()`等节点搜索方法
`document.body.childNodes instanceof NodeList // true`
`document.querySelectorAll('body') instanceof NodeList`
`NodeList` 实例很像数组，可以使用 `length` 属性和 `forEach` 方法。
但是，它不是数组，不能使用 `pop` 或 `push` 之类数组特有的方法。
`Array.isArray(document.body.childNodes)`
`document.body.childNodes.length`
`children.forEach(console.log)`
上面代码中，NodeList 实例 children 不是数组，但是具有 length 属性和 forEach 方法。
顺便提一下`foreach`
```javascript
var arr = [
"The",
"quick",
"brown",
"fox",
"jumps",
"over",
"the",
"lazy",
"dog"
];
arr.forEach(console.log);
```
对象转数组
如果 NodeList 实例要使用数组方法，可以将其转为真正的数组。
`var children = document.body.childNodes;`
`var nodeArr = Array.prototype.slice.call(children);`
```javascript
var arr = [
"The",
"quick",
"brown",
"fox",
"jumps",
"over",
"the",
"lazy",
"dog"
];
var obj = {
0: "xujunhao",
1: "good",
2: "man",
length: 3
};
// var res = [].slice.call(obj);
// console.log(res);
var arr = [];
for (var i = 0; i < obj.length; i++) {
arr.push(obj[i]);
}
console.log(arr);
```
除了使用 `forEach` 方法遍历 `NodeList` 实例，还可以使用 `for` 循环。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var obj = document.body.childNodes;
for (var i = 0; i < obj.length; i++) {
console.log(obj[i]);
}
};
</script>
</head>
<body>
<div><span></span></div>
</body>
</html>
```
注意，NodeList 实例可能是动态集合，也可能是静态集合。
所谓动态集合就是一个活的集合，DOM 删除或新增一个相关节点，都会立刻反映在 NodeList 实例。
目前，只有 Node.childNodes 返回的是一个动态集合，其他的 NodeList 都是静态集合。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var children = document.body.childNodes;
console.log(children.length);
document.body.appendChild(document.createElement("p"));
console.log(children.length);
};
</script>
</head>
<body>
<div><span></span></div>
</body>
</html>
```
`document.querySelectorAll()`就不行...
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var children = document.querySelectorAll("div");
console.log(children.length);
document.body.appendChild(document.createElement("div"));
console.log(children.length);
};
</script>
</head>
<body>
<div><span></span></div>
</body>
</html>
```
## NodeList.prototype.length
`length` 属性返回 `NodeList` 实例包含的节点数量。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var objLength = document.querySelectorAll("span").length;
console.log(objLength);
};
</script>
</head>
<body>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</body>
</html>
```
对于那些不存在的 HTML 标签，length 属性返回 0。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var objLength = document.querySelectorAll("p").length;
console.log(objLength);
};
</script>
</head>
<body>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</body>
</html>
```
支持自定义标签吗?
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var objLength = document.querySelectorAll("span").length;
console.log(objLength);
};
</script>
</head>
<body>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
## NodeList.prototype.forEach()
`forEach` 方法用于遍历 `NodeList` 的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的 `forEach` 方法完全一致。
```javascript
var children = document.body.childNodes;
children.forEach(function f(item, i, list) {
// ...
}, this);
```
上面代码中，回调函数 f 的三个参数依次是当前成员、位置和当前 NodeList 实例。forEach 方法的第二个参数，用于绑定回调函数内部的 this，该参数可省略。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
document.body.childNodes.forEach(function(a, b, c) {
console.log(b);
}, this);
};
</script>
</head>
<body>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
document.body.childNodes.forEach(function(a, b, c) {
console.log(this.childNodes.item(b));
}, document.getElementById("div1"));
};
</script>
</head>
<body>
<div id="div1">
<div><span111></span111></div>
</div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
## NodeList.prototype.item()
`item` 方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.childNodes.item(1));
};
</script>
</head>
<body>
<div id="div1">
<div><span111></span111></div>
</div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
如果参数值大于实际长度，或者索引不合法（比如负数），item 方法返回 null。如果省略参数，item 方法会报错。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.childNodes.item(111));
};
</script>
</head>
<body>
<div id="div1">
<div><span111></span111></div>
</div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.childNodes.item());
};
</script>
</head>
<body>
<div id="div1">
<div><span111></span111></div>
</div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
所有类似数组的对象，都可以使用方括号运算符取出成员。一般情况下，都是使用方括号运算符，而不使用 item 方法。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.childNodes[1]);
};
</script>
</head>
<body>
<div id="div1">
<div><span111></span111></div>
</div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.childNodes[11111]);
};
</script>
</head>
<body>
<div id="div1">
<div><span111></span111></div>
</div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
```javascript
var arr = [
"The",
"quick",
"brown",
"fox",
"jumps",
"over",
"the",
"lazy",
"dog"
];
console.log(arr[11111]);
```
## NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()
这三个方法都返回一个 ES6 的遍历器对象，可以通过 for...of 循环遍历获取每一个成员的信息。
区别在于，keys()返回键名的遍历器，values()返回键值的遍历器，entries()返回的遍历器同时包含键名和键值的信息。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var children = document.body.childNodes;
for (var key of children.keys()) {
console.log(key);
}
for (var value of children.values()) {
console.log(value);
}
for (var entry of children.entries()) {
console.log(entry);
}
};
</script>
</head>
<body>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
<div><span111></span111></div>
</body>
</html>
```
# HTMLCollection 接口
## 概述
`HTMLCollection` 是一个节点对象的集合，只能包含元素节点（`element`），不能包含其他类型的节点。
它的返回值是一个类似数组的对象，但是与 `NodeList` 接口不同，HTMLCollection 没有 `forEach` 方法，只能使用 `for` 循环遍历。
返回 `HTMLCollection` 实例的，主要是一些 `Document` 对象的集合属性，比如 `document.links、docuement.forms、document.images` 等。
### document.links
links 集合返回当期文档所有链接的数组。
提示： links 集合计算 <a href=""> 标签和 <area> 标签。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg"
usemap="#planetmap"
/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
</map>
<p><a href="http://www.baidu.com">百度一下</a></p>
<p>
链接/地址数目:
<script>
document.write(document.links.length);
</script>
</p>
</body>
</html>
```
### docuement.forms
forms 集合可返回对文档中所有 Form 对象的引用。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script>
document.write("This document contains: ");
document.write(document.forms.length + " forms.");
</script>
</body>
</html>
```
### document.images
`images` 集合可返回对文档中所有 Image 对象的引用。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg"
/>
<br />
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg"
/>
<br />
<br />
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg"
/>
<br />
<br />
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544033630190&di=f5c4771e31c4cb1951729a4bc86ba214&imgtype=0&src=http%3A%2F%2Fwww.yliywai.com%2Fyyact%2Fimages%2Fearth%2Ft1.jpg"
/>
<br />
<br />
<script type="text/javascript">
document.write("This document contains: ");
document.write(document.images.length + " images.");
</script>
</body>
</html>
```
`document.links instanceof HTMLCollection`
`HTMLCollection` 实例都是动态集合，节点的变化会实时反映在集合中。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var htmlForms = document.forms;
var nodeForms = document.body.childNodes;
console.log(htmlForms.length);
console.log(nodeForms.length);
document.body.appendChild(document.createElement("form"));
console.log(htmlForms.length);
console.log(nodeForms.length);
};
</script>
</head>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
</body>
</html>
```
如果元素节点有 `id` 或 `name` 属性，那么 `HTMLCollection` 实例上面，可以使用 id 属性或 name 属性引用该节点元素。
如果没有对应的节点，则返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img src="haha.jpg" alt="" id="img1" />
<script>
window.onload = function() {
console.log(document.images.img1);
console.log(document.images.img1.src);
};
</script>
</body>
</html>
```
上面代码中，document.images 是一个 HTMLCollection 实例，可以通过<img>元素的 id 属性值，从 HTMLCollection 实例上取到这个元素。
## HTMLCollection.prototype.length
`length` 属性返回 `HTMLCollection` 实例包含的成员数量。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<a href="">0</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
<a href="">11</a>
<a href="">12</a>
<a href="">13</a>
<a href="">14</a>
<a href="">15</a>
<a href="">16</a>
<a href="">17</a>
<a href="">18</a>
<a href="">19</a>
<a href="">20</a>
<script>
window.onload = function() {
console.log(document.links.length);
};
</script>
</body>
</html>
```
## HTMLCollection.prototype.item()
`item` 方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。
由于方括号运算符也具有同样作用，而且使用更方便，所以一般情况下，总是使用方括号运算符。
如果参数值超出成员数量或者不合法（比如小于 0），那么 item 方法返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<a href="">this is tag a 0</a>
<br />
<a href="">this is tag a 1</a>
<br />
<a href="">this is tag a 2</a>
<br />
<a href="">this is tag a 3</a>
<br />
<a href="">this is tag a 4</a>
<br />
<a href="">this is tag a 5</a>
<br />
<a href="">this is tag a 6</a>
<br />
<a href="">this is tag a 7</a>
<br />
<a href="">this is tag a 8</a>
<br />
<a href="">this is tag a 9</a>
<br />
<a href="">this is tag a 10</a>
<br />
<a href="">this is tag a 11</a>
<br />
<a href="">this is tag a 12</a>
<br />
<a href="">this is tag a 13</a>
<br />
<a href="">this is tag a 14</a>
<br />
<a href="">this is tag a 15</a>
<br />
<a href="">this is tag a 16</a>
<br />
<a href="">this is tag a 17</a>
<br />
<a href="">this is tag a 18</a>
<br />
<a href="">this is tag a 19</a>
<br />
<a href="">this is tag a 20</a>
<br />
<script>
window.onload = function() {
console.log(document.links.item(3).innerHTML);
console.log(document.links[4].innerHTML);
console.log(document.links.item(33333));
console.log(document.links.item(-33));
console.log(document.links[33333]);
console.log(document.links[-33]);
};
</script>
</body>
</html>
```
## HTMLCollection.prototype.namedItem()
`namedItem` 方法的参数是一个字符串，表示 id 属性或 name 属性的值，返回对应的元素节点。
如果没有对应的节点，则返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img id="pic" src="http://example.com/hello.jpg" name="hello" />
<script>
window.onload = function() {
console.log(document.images.namedItem("pic"));
console.log(document.images.namedItem("hello"));
};
</script>
</body>
</html>
```
节点对象除了继承 `Node` 接口以外，还会继承其他接口。
`ParentNode`接口表示当前节点是一个父节点，提供一些处理子节点的方法。
`ChildNode`接口表示当前节点是一个子节点，提供一些相关方法。
# ParentNode 接口
如果当前节点是父节点，就会继承 ParentNode 接口。
由于只有元素节点（`element`）、文档节点（`document`）和文档片段节点（`documentFragment`）可以成为父节点，
因此只有这三类节点会继承`ParentNode`接口。
## ParentNode.children
`children`属性返回一个`HTMLCollection`实例，
成员是当前节点的所有元素子节点。该属性只读。
下面是遍历某个节点的所有元素子节点的示例。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
window.onload = function() {
for (var i = 0; i < document.childNodes.length; i++) {
console.log(document.childNodes[i]);
}
};
</script>
</body>
</html>
```
注意，`children`属性只包括元素子节点，不包括其他类型的子节点（比如文本子节点）。
如果没有元素类型的子节点，返回值 `HTMLCollection` 实例的 `length` 属性为 0。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.children.length);
};
</script>
</head>
<body>
<div></div>
hello world
</body>
</html>
```
另外，`HTMLCollection` 是动态集合，会实时反映 DOM 的任何变化。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.children.length);
document.body.appendChild(document.createElement("div"));
console.log(document.body.children.length);
};
</script>
</head>
<body>
<div></div>
hello world
</body>
</html>
```
## ParentNode.firstElementChild
`firstElementChild` 属性返回当前节点的第一个元素子节点。如果没有任何元素子节点，则返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.firstChild.nodeName);
console.log(document.body.firstElementChild.nodeName);
};
</script>
</head>
<body>
<div></div>
hello world
</body>
</html>
```
上面代码中，document 节点的第一个元素子节点是<HTML>。
## ParentNode.lastElementChild
`lastElementChild` 属性返回当前节点的最后一个元素子节点，如果不存在任何元素子节点，则返回 null。
`document.lastElementChild.nodeName`
上面代码中，document 节点的最后一个元素子节点是<HTML>（因为 document 只包含这一个元素子节点）。
## ParentNode.childElementCount
`childElementCount` 属性返回一个整数，表示当前节点的所有元素子节点的数目。如果不包含任何元素子节点，则返回 0。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
console.log(document.body.childElementCount);
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
hello world
</body>
</html>
```
## ParentNode.append()，ParentNode.prepend()
`append` 方法为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面。
该方法不仅可以添加元素子节点，还可以添加文本子节点。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
window.onload = function() {
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);
};
</script>
</body>
</html>
```
注意，该方法没有返回值。
`prepend` 方法为当前节点追加一个或多个子节点，位置是第一个元素子节点的前面。
它的用法与 `append` 方法完全一致，也是没有返回值。
# ChildNode 接口
如果一个节点有父节点，那么该节点就继承了 `ChildNode` 接口。
## ChildNode.remove()
`remove` 方法用于从父节点移除当前节点。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>this is div 0</div>
<div>this is div 1</div>
<div>this is div 2</div>
<div>this is div 3</div>
<div>this is div 4</div>
<div>this is div 5</div>
<div>this is div 6</div>
<div>this is div 7</div>
<div>this is div 8</div>
<div>this is div 9</div>
</body>
<script>
window.onload = function() {
document.body.remove();
};
</script>
</html>
```
## ChildNode.before()，ChildNode.after()
`before` 方法用于在当前节点的前面，插入一个或多个同级节点。两者拥有相同的父节点。
如果是多个参数, 插入的是一个`整体`
注意，该方法不仅可以插入元素节点，还可以插入文本节点。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>div1</div>
<script>
window.onload = function() {
var p = document.createElement("p");
var p1 = document.createElement("p");
var oDiv = document.getElementsByTagName("div")[0];
oDiv.before(p);
oDiv.before("Hello");
oDiv.before(p, p1);
oDiv.before(p, "Hello");
};
</script>
</body>
</html>
```
`after` 方法用于在当前节点的后面，插入一个或多个同级节点，两者拥有相同的父节点。用法与 `before` 方法完全相同。
## ChildNode.replaceWith()
`replaceWith` 方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>div1</div>
<script>
window.onload = function() {
var span = document.createElement("span");
document.getElementsByTagName("div")[0].replaceWith(span);
};
</script>
</body>
</html>
```
- 每日单词
- JavaScript 入门
- JavaScript 基础
- JavaScript 基础回顾
- JavaScript 函数
- 匿名函数,多维数组,数据类型转换
- JavaScript 类型转换, 变量作用域
- js 运算符(一)
- js 运算符(二)
- js 流程控制语句
- JavaScript 扫盲日
- JavaScript 牛刀小试(一)
- JavaScript 牛刀小试(二)
- JavaScript 再谈函数
- JavaScript-BOM
- JavaScript-定时器(一)
- JavaScript-定时器(二)
- 番外-轮播图源码
- JavaScript 轮播图和 DOM 简介
- JavaScript-DOM 基础-NODE 接口-属性
- JavaScript-DOM 基础-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 节点
- CSS 复习与扩展(一)
- CSS 复习与扩展(二)
- 走进 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高级
- jquery 备忘清单-1
- jquery 备忘清单-2
- 聊聊 json
- jquery 备忘清单-3