目录
Node 节点属性_firstChild/lastChild
Text 节点
文本节点（ Text ）代表元素节点（ Element ）和属性节点（ Attribute ）的文本内容。
Text节点属性
data
data 属性用来设置或读取文本节点的内容
// 读取文本内容
document.querySelector('p').firstChild.data
// 设置文本内容
document.querySelector('p').firstChild.data = 'Hello World';length
length 属性返回当前文本节点的文本长度
(new Text('Hello')).length // 5Text节点方法
appendData()
在 Text 节点尾部追加字符串
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.appendData('!');// 页面显示 Hello World!deleteData()
删除 Text 节点内部的子字符串，第一个参数为子字符串开始位置， 第二个参数为子字符串长度
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.deleteData(7, 5);
// 页面显示 Hello W
insertData()
在 Text 节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.insertData(7, 'Hello');
// 页面显示 Hello WHelloreplaceData()
用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.replaceData(7, 5,'World');
// 页面显示 Hello WWorldsubstringData()
用于获取子字符串，第一个参数为子字符串在 Text 节点中的开始位置，第二个参数为子字符串长度
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.substringData(7, 10);
// 页面显示不变，返回"World "
remove()
remove 方法用于移除当前 Text 节点
// <p>Hello World</p>
document.querySelector('p').firstChild.remove()
// 现在 HTML 代码为
// <p></p>
DocumentFragment 节点
DocumentFragment 节点代表一个文档的片段，它一般用于构建一个 DOM 结构，然后插入当前文档
var docFrag = document.createDocumentFragment();
var li = document.createElement('li');
li.innerHTML = 'Hello World';
docFrag.appendChild(li);
document.querySelector('ul').appendChild(docFrag);
温馨提示
DocumentFragment 节点本身不能被插入当前文档，插入文档中的是他里面的子元素
应用场景
多次操作DOM，可以使用 DocumentFragment 变成一次操作，节省了内存的消耗
Node 节点属性_nodeName
所有 DOM 节点都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础
节点的类型有七种
Document：整个文档树的顶层节点
DocumentType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
nodeName 属性返回节点的名称
// <div id="box">hello world</div>
var box = document.getElementById('box');
var docFrag = document.createDocumentFragment();
console.log(box.nodeName) // "DIV"
console.log(document.nodeName);
console.log(box.getAttributeNode("id").nodeName);
console.log(box.firstChild.nodeName);
console.log(docFrag.nodeName);不同节点的 nodeName 属性值如下
文档节点（document）： #document
元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）： #text
文档片断节点（DocumentFragment）： #document-fragment
文档类型节点（DocumentType）：文档的类型
注释节点（Comment）： #comment
Node 节点属性_nodeValue
nodeValue 属性返回一个字符串，表示当前节点本身的文本值，该属性可读写
// <div id="box">hello world</div>
var box = document.getElementById('box');
box.nodeValue // null
box.firstChild.nodeValue // "hello world"
Node 节点属性_textContent
textContent 属性返回当前节点和它的所有后代节点的文本内容
// <div id="box">This is <span>some</span>text</div>
document.getElementById('box').textContent
// This is some textNode 节点属性_nextSibling
Node.nextSibling 属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回 null
// <div id="box1">hello</div><div
id="box2">world</div>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
box1.nextSibling === box2 // truenextSibling 属性可以用来遍历所有子节点
var box = document.getElementById('box').firstChild;
while (box !== null) {
console.log(box.nodeName);
box = box.nextSibling;
}Node 节点属性_previousSibling
previousSibling 属性返回当前节点前面的，距离最近的一个同级节点。 如果当前节点前面没有同级节点，则返回 null
// <div id="box1">hello</div><div id="box2">world</div>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
box2.previousSibling === box1 // trueNode 节点属性_parentNode
parentNode 属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点 （document）和文档片段节点（documentfragment）
if (node.parentNode) {
node.parentNode.removeChild(node);
}Node 节点属性_firstChild/lastChild
firstChild 属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回 null
// <p id="p1"><span>First span</span></p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "SPAN"lastChild 属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回 null 。用法与 firstChild 属性相同
Node 节点属性_childNodes
childNodes 属性返回一个类似数组的对象（ NodeList 集合），成员包括当前节点的所有子节点
var children = document.querySelector('ul').childNodes;
使用该属性，可以遍历某个节点的所有子节点
var box = document.getElementById('box');
var children = div.childNodes;
for (var i = 0; i < children.length; i++) {
// ...
}Node 节点方法_appendChild()
appendChild 方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点
var p = document.createElement('p');
document.body.appendChild(p);
Node 节点方法_hasChildNodes()
hasChildNodes 方法返回一个布尔值，表示当前节点是否有子节点
var foo = document.getElementById('foo');
if (foo.hasChildNodes()) {
foo.removeChild(foo.childNodes[0]);
}Node 节点方法_cloneNode()
cloneNode 方法用于克隆一个节点。它接受一个布尔值作为参数，表示 是否同时克隆子节点。它的返回值是一个克隆出来的新节点
var cloneUL = document.getElementById('list').cloneNode(true);Node 节点方法_insertBefore()
insertBefore 方法用于将某个节点插入父节点内部的指定位置 insertBefore 方法接受两个参数，第一个参数是所要插入的节点 newNode ，第二个参数是父节点 parentNode 内部的一个子节点 referenceNode 。 newNode 将插在 referenceNode 这个子节点的前面。返回值是 插入的新节点 newNode 。
var insertedNode = parentNode.insertBefore(newNode,referenceNode);
Node 节点方法_removeChild()
removeChild 方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点
var box = document.getElementById('box');
box.parentNode.removeChild(box);温馨提示
这个方法是在 box 的父节点上调用的，不是在 box 上调用的。
Node 节点方法_replaceChild()
replaceChild 方法用于将一个新的节点，替换当前节点的某一个子节点 replaceChild 方法接受两个参数，第一个参数 newChild 是用来替换的新节点，第二个参数 oldChild 是将要替换走的子节点。返回值是替换走的那个节点 oldChild
var replacedNode = parentNode.replaceChild(newChild, oldChild);