1、节点
加载 HTML 页面时，web 浏览器生成一个树型结构，用来表示页面内部结构，称之为 DOM树，DOM 将这种树型结构理解为由节点组成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 家谱树 -->
<p>11111111</p>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>
</html>父级.children：返回元素节点（在IE8及以下，会返回注释节点，在IE9及以下，正常返回）
父级.childNodes：在IE9及以上，返回的包括换行节点，在IE8及以下，只返回元素节点
返回的都是一个类数组、伪数组，是一个对象。它们有长度，有下标，可以通过下标获取某一个
var li = ul.children;
console.log(li);
var li = ul.childNodes;
console.log(li);3、节点基本属性
节点.nodeType
节点.nodeName
节点.nodeValue
<p>11111111</p>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<script>
var p = document.querySelector('p');
var ul = document.getElementById('ul1');
var li = ul.childNodes;
// 节点.nodeType：节点类型，用1--12的数字来代表12种类型
// 1:元素节点 2:属性节点 3:文本节点 9:文档节点
console.log(p.nodeType); // 1
console.log(ul.nodeType); // 1
for (var i = 0; i < li.length; i++) {
console.log(li[i].nodeType);
}
// 节点.nodeName：节点名称，元素节点就是大写标签名，文本节点就是#text
console.log(p.nodeName); // P
console.log(ul.nodeName); // UL
for (var i = 0; i < li.length; i++) {
console.log(li[i].nodeName);
}
// 节点.nodeValue：节点内容
// 它认为文本节点才有内容，元素节点没有内容
console.log(p.nodeValue);
console.log(p.childNodes[0].nodeValue); // 11111111
console.log(p.innerText); // 11111111
</script>4、父节点
元素.parentNode 返回父级
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>var box3 = document.getElementById('box3');
console.log(box3.parentNode); // box2
console.log(box3.offsetParent);<ul id="list">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<script>
var ul = document.getElementById('list');
// 第一个子节点
// 父级.firstChild : 在标准浏览器有可能返回的是文本节点，在IE8及以下，只返回第一个元素节点
// 父级.firstElementChild : 在标准浏览器返回第一个元素节点，而在IE8及以下，没有这个方法
// console.log(ul.firstChild);
// console.log(ul.firstElementChild);
var first = ul.firstElementChild || ul.firstChild;
first.style.backgroundColor = 'red';
// -----------------------------
// 最一个子节点
// 父级.lastChild
// 父级.lastElementChild
var last = ul.lastElementChild || ul.lastChild;
last.style.backgroundColor = 'pink';
// -----------------------------
// 下一个兄弟节点
// 元素.nextSibling
// 元素.nextElementSibling
var next = first.nextElementSibling || first.nextSibling;
next.style.backgroundColor = 'green';
// -----------------------------
// 上一个兄弟节点
// 元素.previousSibling
// 元素.previousElementSibling
var prev = last.previousElementSibling || last.previousSibling;
prev.style.backgroundColor = 'yellow';
</script>1、创建节点
创建标签：document.createElement(标签名);
创建文本：document.createTextNode(文本);
2、追加节点
父元素.appendChild(子元素);
子元素添加到父元素中，放到最后
3、插入节点
父元素.insertBefore(要插入的节点, 参考的节点);
要插入的节点放在参考元素的前面
4、删除节点
父元素.removeChild(被删除的元素)
返回被删除的元素
5、替换节点
父元素.replaceChild(新的节点，被替换的节点);
6、克隆节点
被克隆的元素.cloneNode(布尔);
返回克隆出来的新节点，如果参数为true，则克隆子孙节点，如果为false，则只克隆当前这个标签
