Dom
Dom
Node
所有Dom节点对象都继承了Node接口，拥有一些共同的属性和方法。
-
属性和方法
-
Node.prototype.nodeType
nodeType属性返回数值，表示节点类型。Node定义了几个常量来对应这些节点类型。
文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE属性节点（attr）： 2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片段节点（documentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（documentType）: 10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（comment）: 12，对应常量Node.COMMENT_NODE
确定节点类型时使用nodeType。
var doc = document.documentElement.firstChild;
if (doc.nodeType === Node.ELEMENT_NODE) {
console.info('该节点为元素节点');
}
-
nodeName属性返回节点名称。不同节点的名称如下：
文档节点：#document
文档类型节点：文档类型
文档片段节点：#document-fragment
注释节点：#comment
文本节点：#text
元素节点：大写标签名
属性节点：属性名称 -
nodeValue属性返回字符串，表示节点本身的文本值，只有（text）文本节点、（attr）属性节点和（comment）注释节点有文档值，其他节点返回null。同样地，只有这三类节点地nodeValue可以赋值，其他无效。
//html代码
<div id="div1">hello</div>
//js代码
var node = document.getElementById('div1');
node.nodeValue;
//null
node.firstChild.nodeValue;
//'hello'
textContent属性返回当前节点和后代所有节点的文本内容。textContent属性会自动忽略当前节点内部的HTML标签，返回所有文本内容。该属性是可读写的，可以用新的文本节点替换原来所有子节点，它会对自动html标签转义。//html代码 <div id="div1">hello<span>my little</span></div> //js代码 var node = document.getElementById('div1'); node.textContent; //hello my little document.getElementById('div1').textContent = '<p>An Angel</p>';
上面插入的代码，<p>标签会解释为文本，而不会当作标签处理。
对于 text文本节点、comment注释节点和attr属性节点，textContent属性返回值与nodeValue返回值一样，其他类型节点，该属性会将每个子节点（不包括注释节点）的内容连接在一起返回，如果没有子节点，返回空字符串。
document文档节点和documentType文档类型节点的属性textContent返回null。如果要读取整个文档的文本内容，可以用document.documentElement.textContent。
baseURI属性返回当前网页的绝对路径，浏览器可以根据这个属性可以计算出网页上的相对路径URL。该属性为只读。如果无法获取，返回null。
该属性的值一般是由window.location决定的，但是可以由<base>标签改变该属性。
//html代码
<base href="http://www.bishine.com">
//js代码
document.baseURI;
//http://www.bishine.com
-
ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。document本身的ownerDocument属性返回null。 -
nextSibling属性返回紧跟在当前节点后面的的第一个同级节点，如果当前节点后面没有同级节点，返回null。 -
previousSibling属性返回紧跟在当前节点前面的的第一个同级节点，如果当前节点前面没有同级节点，返回null。
NodeList
-
属性和方法
-
NodeList.prototype.length -
NodeList.prototype.forEach() -
NodeList.prototype.item() -
NodeList.prototype.keys() -
NodeList.prototype.values() -
NodeList.prototype.entries()
NodeList 实例是一个类似数组的对象，有length，forEach属性，但是不能使用pop、push等数组方法。
可以通过以下方法获取NodeList实例：
Node.childNodesdocument.querySelectorAll()等节点搜索方法
如果想要将NodeList转换为数组，可以通过以下方法：
-
var nodes = document.body.childNodes; var childern = Array.prototype.slice.call(children); - 使用
for循环+push()遍历
Node.childNodes获取的NodeList是动态集合，其他的NodeList都是静态集合。
var children = document.body.childNodes;
children.length // 18
document.body.appendChild(document.createElement('p'));
children.length // 19
item()方法用来获取传入参数所对应位置上的节点，参数为正整数，表示节点的位置，如果传参错误，返回null，如果不传参，直接报错。
NodeList对象的keys()方法获取对象的键， values()方法获取对象的键值， entries()获取键和键值的信息。
var children = document.body.childNodes;
for (var key of children) {
console.info(key);
}
//0
//1
//...
for (var value of children) {
console.info(value);
}
//#text
//<head>
//...
for (var entry of children) {
console.info(entry);
}
// Array [0, #text]
//Array [1, <script>]
// ...
for...of可以用来遍历对象。
HTMLCollection
HTMLCollection是一个只能包含元素节点的对象集合，返回实例的主要是Document对象的集合属性，比如document.forms、 document.images、 document.tables等，与NodeList集合不同的是，HTMLCollection只有length属性和for()方法，没有forEach()方法。
HTMLCollection实例对象都是动态集合，节点的变化实时反映在集合中。
-
属性和方法
-
HTMLCollection.prototype.length -
HTMLCollection.prototype.item() -
HTMLCollection.prototype.namedItem()
如果节点有id或name属性，在HTMLCollection实例中可以直接通过id或name访问到该节点。
//html代码
<img id="pic" src="http://www.baifu.hdhhd"/>
//js代码
var img = document.getElementById('pic');
document.images.pic === img;//true
namedItem()方法是通过id或name的值获取到对应的节点，如果没有，返回null。
//html代码
<img id="pic" src="http://www.baifu.hdhhd"/>
//js代码
var img = document.getElementById('pic');
document.images.namedItem('pic')=== img;//true
ParentNode
如果当前节点是父节点，就会继承ParentNode接口，因为只有element元素节点、document文档节点、documentFragment文档片段节点有子节点，所以只有这三类会继承ParentNode接口。
-
属性和方法
-
Parent.children -
Parent.firstElementChild -
Parent.lastElementChild -
Parent.elementChildCount -
Parent.append() -
Parent.preappend()
ParentNode.children属性返回一个HTMLCollection实例，成员对象是当前节点的所有元素(element)子节点，该属性只读。
ParentNode.firstElementChild属性返回当前节点的第一个元素(element)子节点，没有时返回null。
ParentNode.lastElementChild属性返回当前节点的最后一个元素(element)子节点，没有时返回null。
ParentNode.elementChildCount属性返回当前节点所有元素(element)子节点的数目。
ParentNode.append()方法是在当前节点的最后一个子节点后面添加一个或多个子节点，节点可以是元素节点，也可以是文本节点。
var node = document.body;
var p = document.createELement('p');
//添加元素节点
node.append(p);
//添加文本节点
node.append('Hello world');
//添加多个节点，包括元素节点和文本节点
var p1 = document.createELement('div');
var p2 = document.createELement('div');
node.append(p1, p2, 'happy');
ParentNode.preappend()方法是在当前节点的第一个子节点前面添加一个或多个子节点，节点可以是元素节点，也可以是文本节点，方法同ParentNode.append()。
ChildNode
如果一个节点有父节点，那么该节点继承ChildNode接口。
-
属性和方法
-
ChildNode.remove() -
ChildNode.before() -
ChildNode.after() -
ChildNode.replaceWith()
remove()可以从父节点中移除当前元素。
el.remove();
before()是在当前节点之前插入一个或多个节点，节点类型可以是元素节点和文本节点。
after()是在当前节点之后插入一个或多个节点，节点类型可以是元素节点和文本节点。
该两个方法的使用同ParentNode.append()。
replaceWith()是使用参数节点替换当前节点，参数可以是元素节点，也可以是文本节点。
el.replace('hello');
//用文本元素替换当前元素