鏈接地址：http://blog.csdn.net/hj7jay/article/details/53389522
http://blog.csdn.net/terrychinaz/article/details/8492092
1、節(jié)點(diǎn)查找API節(jié)點(diǎn)：
Node是一個(gè)接口，中文叫節(jié)點(diǎn)莽鸿，很多類(lèi)型的DOM元素都是繼承于它，都共享著相同的基本屬性和方法查乒。常見(jiàn)的Node有 element，text郁竟，attribute玛迄，comment（注釋節(jié)點(diǎn)），document 等棚亩。
{
ELEMENT_NODE: 1, // 元素節(jié)點(diǎn)
ATTRIBUTE_NODE: 2, // 屬性節(jié)點(diǎn)
TEXT_NODE: 3, // 文本節(jié)點(diǎn)
COMMENT_NODE: 8, // 注釋節(jié)點(diǎn)
DOCUMENT_NODE: 9, // 文檔
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11, // 文檔碎片
}
通常情況下蓖议，只需要了解上面的幾個(gè)就行了虏杰。
2、節(jié)點(diǎn)查找API
document.getElementById ：根據(jù)ID查找元素勒虾，大小寫(xiě)敏感纺阔，如果有多個(gè)結(jié)果，只返回第一個(gè)修然；
document.getElementsByClassName ：根據(jù)類(lèi)名查找元素笛钝，多個(gè)類(lèi)名用空格分隔，返回一個(gè) HTMLCollection 愕宋。注意兼容性為IE9+（含）玻靡。另外，不僅僅是document中贝，其它元素也支持 getElementsByClassName 方法囤捻；
document.getElementsByTagName ：根據(jù)標(biāo)簽查找元素， * 表示查詢(xún)所有標(biāo)簽邻寿，返回一個(gè) HTMLCollection 最蕾。
document.getElementsByName ：根據(jù)元素的name屬性查找，返回一個(gè) NodeList
document.querySelector ：返回單個(gè)Node老厌，IE8+(含），如果匹配到多個(gè)結(jié)果黎炉，只返回第一個(gè)枝秤。
document.querySelectorAll ：返回一個(gè) NodeList ，IE8+(含）慷嗜。
document.forms ：獲取當(dāng)前頁(yè)面所有form淀弹，返回一個(gè) HTMLCollection ；
這里順便提一下：querySelector與getElement之類(lèi)的區(qū)別：
寫(xiě)法不同庆械，最大的區(qū)別就是getElement之類(lèi)的只能接受的參數(shù)是id薇溃，class，name之類(lèi)的缭乘，而querySelector接受的參數(shù)則擴(kuò)展到了css的選擇器【必須嚴(yán)格按照css選擇器寫(xiě)法來(lái)寫(xiě)沐序，不然拋出異常】堕绩，可以用任意的選擇器來(lái)描述選擇的東東策幼。getElement***返回值是一個(gè) Live Node List（動(dòng)態(tài)），querySelector返回的是 Static Node List（靜態(tài)）奴紧。
什么是NodeList呢特姐？
<pre>NodeList 本質(zhì)上是一個(gè)動(dòng)態(tài)的 Node 集合，只是規(guī)范中對(duì) querySelectorAll 有明確要求黍氮，規(guī)定其必須返回一個(gè)靜態(tài)的 NodeList 對(duì)象唐含。</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浅浮？
實(shí)際上，HTMLCollection 和 NodeList 十分相似捷枯，都是一個(gè)動(dòng)態(tài)的元素集合滚秩，每次訪(fǎng)問(wèn)都需要重新對(duì)文檔進(jìn)行查詢(xún)。兩者的本質(zhì)上差別在于铜靶，HTMLCollection 是屬于 Document Object Model HTML 規(guī)范叔遂，而 NodeList 屬于 Document Object Model Core 規(guī)范。
這里又有個(gè)問(wèn)題:NodeList 和HTMLCollection 的區(qū)別是什么呢争剿？
HTMLCollection是元素集合已艰，而NodeList是節(jié)點(diǎn)集合（既可以包含元素，也可以包含文本節(jié)點(diǎn)）蚕苇。所以 node.childNodes 返回 NodeList哩掺，而 node.children 和 node.getElementsByXXX 返回 HTMLCollection 。children是Element的屬性涩笤，只返回的是html節(jié)點(diǎn)嚼吞。childNodes是Node的屬性，返回的是制定元素的所有的子元素集合的節(jié)點(diǎn)蹬碧，包括html節(jié)點(diǎn)舱禽，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn)恩沽，注釋節(jié)點(diǎn)等等誊稚。
例子：
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節(jié)點(diǎn)把換行也當(dāng)作了一個(gè)個(gè)的空白文本節(jié)點(diǎn)了，所以返回的是9罗心，而htmlcollection卻不會(huì)里伯。querySelectorAll 的返回值是一個(gè)靜態(tài)的 NodeList 對(duì)象，而 getElementsBy ***系列的返回值實(shí)際上是一個(gè) HTMLCollection 對(duì)象 渤闷。
<pre>
如果作為NodeList返回疾瓮，以下情況將會(huì)被當(dāng)作文本節(jié)點(diǎn)處理：
- 一個(gè)<div>和注釋間的斷行和空格（或tab）作為text node（沒(méi)錯(cuò)，標(biāo)簽之間的空白符號(hào)也可以被解析為text node）
- 注釋作為comment node
- 注釋和<p>之間的斷行和空格（或tab）作為text node
- p作為element
- </p>和</div>之間的斷行和空格（或tab）作為text node
</pre>
