链接地址： http://blog.csdn.net/hj7jay/article/details/53389522
http://blog.csdn.net/terrychinaz/article/details/8492092
1、节点查找API节点：
Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有 element，text，attribute，comment（注释节点），document 等。
{
ELEMENT_NODE: 1, // 元素节点
ATTRIBUTE_NODE: 2, // 属性节点
TEXT_NODE: 3, // 文本节点
COMMENT_NODE: 8, // 注释节点
DOCUMENT_NODE: 9, // 文档
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
}
通常情况下，只需要了解上面的几个就行了。
2、节点查找API
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；
这里顺便提一下：querySelector与getElement 之类的区别：
写法不同，最大的区别就是getElement 之类的只能接受的参数是id，class，name之类的，而querySelector接受的参数则扩展到了css的选择器【必须严格按照css选择器写法来写，不然抛出异常】，可以用任意的选择器来描述选择的东东。getElement***返回值是一个 Live Node List（动态），querySelector返回的是 Static Node List（静态）。
什么是NodeList呢？
<pre>NodeList 本质上是一个动态的 Node 集合，只是规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象。</pre>
看下面：
html:
<p class="lost">1</p>
<p class="lost">2</p>
js:
var query2 = document.querySelectorAll('.lost')
var query3 = document.getElementsByClassName("lost")
console.log(query2)//打印出的原型是NodeList
console.log(query3)//HTMLCollection
返回的是NodeList /HTMLCollection？
实际上，HTMLCollection 和 NodeList 十分相似，都是一个动态的元素集合，每次访问都需要重新对文档进行查询。两者的本质上差别在于，HTMLCollection 是属于 Document Object Model HTML 规范，而 NodeList 属于 Document Object Model Core 规范。
这里又有个问题:NodeList 和HTMLCollection 的区别是什么呢？
HTMLCollection是元素集合，而NodeList是节点集合（既可以包含元素，也可以包含文本节点）。所以 node.childNodes 返回 NodeList，而 node.children 和 node.getElementsByXXX 返回 HTMLCollection 。children是Element的属性，只返回的是html节点。childNodes是Node的属性，返回的是制定元素的所有的子元素集合的节点，包括html节点，文本节点，属性节点，注释节点等等。
例子：
html：
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
js：
var ul = document.getElementsByTagName('ul')[0]
var lis1 = ul.childNodes,//NodeList
lis2 = ul.children//htmlcollection
console.log(lis1.toString(), lis1.length) // "[object NodeList]" 9
console.log(lis2.toString(), lis2.length)//[object HTMLCollection] 4
上面的nodelist节点把换行也当作了一个个的空白文本节点了，所以返回的是9，而htmlcollection却不会。querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy ***系列的返回值实际上是一个 HTMLCollection 对象 。
<pre>
如果作为NodeList返回，以下情况将会被当作文本节点处理：
1.节点至少拥有以下三个信息：
node Type:节点类型，元素节点类型为1，属性为2，文本为3，注释为8
node Name:节点名称
node value:节点值
2.父节点：parentNode
语法：element.ParentNode
得到的是离元素最近的父节点，如果找不到就返回null
3.子节点：ParentNode.childNodes
获得所有子节点
4.创建节点：document.create.Element()
document.createElement("元素名") 创建元素节点
let div1 = document.createElement('div')
console.log(div1)
document.createTextNode("文本") 创建文本节点
let divText = document.createTextNode('我是div')console.log(divText)
A.appendChild( B) 把B节点追加至A节点的末尾
div1.appendChild(divText)
console.log(div1)
let body = document.querySelector('body')
body.appendChild(div1)
父节点.insertBefore( A,B ) 把A节点插入到B节点之前 */
let gege = document.createElement('button')
let btnText = document.createTextNode('btn的哥哥')
gege.appendChild(btnText)
let didi = document.getElementById('btn1')
body.insertBefore(gege,didi)
创建一个h1 我是h1 插入到 btn的前面 */
}
