一、祖先接口Node,及他的擴展接口EventTarget
Node是一個接口，許多DOM類型從這個接口繼承，並允許類似地處理（或測試）這些各種類型。
以下接口都從Node繼承其方法和屬性：
Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
在方法和屬性不相關的特定情況下，這些接口可能返回null。它們可能會拋出異常 - 例如，當將子節點添加到沒有子節點的節點類型時。
EventTarget 是一個由可以接收事件的對象實現的接口，並且可以為它們創建偵聽器。
Element，document 和 window 是最常見的事件目標，但是其他對象也可以是事件目標，比如XMLHttpRequest，AudioNode，AudioContext 等等。
許多事件目標（包括元素，文檔和 window）還支持通過 on... 屬性和屬性設置事件處理程序。
二、document接口
Document接口表示在瀏覽器中加載的任何網頁，並作為到網頁內容的入口點，這是 DOM 樹。 DOM樹包括諸如<body> 和 <table>之類的元素，其他等等。其也為文檔（document）提供了全局性的函數，例如獲取頁面的URL、在文檔中創建新的 element 的函數。它為文檔提供全局的函數，像如何獲取頁面的URL和在文檔中創建新的元素。
Document 接口也繼承自 Node 及 EventTarget 接口。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document
三、查找dom API
三種返回形式：HTML，HTMLcollection，HTMLlist
3.1 HTML
document.getElementById 返回html document.querySelector 返回html
3.2 HTMLcollection
HTMLCollection 是一個接口，表示 HTML 元素的集合，它提供了可以遍歷列表的方法和屬性。
document.getElementsByClassName 返回HTMLcollection
document.getElementsByTagName 返回HTMLcollection
document.forms等屬性
Document (images, applets, links, forms, anchors)
form (elements)
map (areas)
select (options)
table (rows, tBodies)
tableSection (rows)
row (cells)
返回HTMLcollection
document.getElementsByName 返回HTMLlist
document.querySelectorAll 返回HTMLlist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{border: 1px solid #000;}
</style>
<body>
<div id="js_id" class="js-class" name='js-name'>
<div>123</div>
</div>
<form action="" name="form2" ></form>
</body>
<script>
// https://developer.mozilla.org/zh-CN/docs/Web/API/Document
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element
/*
Document接口表示在瀏覽器中加載的任何網頁，並作為到網頁內容的入口點，這是 DOM 樹。
DOM樹包括諸如<body> 和 <table>之類的元素，其他等等。其也為文檔（document）提供了全局性的函數，例如獲取頁面的URL、在文檔中創建新的 element 的函數。它為文檔提供全局的函數，像如何獲取頁面的URL和在文檔中創建新的元素。
*/
// 1、老ie會獲得 name
// 2、返回 第一個的html
var js_id=document.getElementById('js_id');
console.log(js_id)
// 類似於jquery $, 但只返回第一個選擇器匹配的html IE8+
var js_selector=document.querySelector('#js_id');
console.log(js_selector)
// HTMLCollection是一個特殊的NodeList，表示包含了若干元素（元素順序為文檔流中的順序）的通用集合是element的集合，它是實時更新的
// 返回一個集合 HTMLcollection IE9+
var js_class=document.getElementsByClassName('js-class');
console.log(js_class)
var js_div=document.getElementsByTagName('div')
console.log(js_div)
// dovument.forms 是屬性
var js_forms=document.forms
console.log(js_forms)
// NodeList 對象是一個節點的集合，
// 返回noteList 是node的集合
var js_name=document.getElementsByName('js-name')
console.log(js_name)
var js_selector_all=document.querySelectorAll('.js-class')
console.log(js_selector_all)
// 集合下 尋找 document 是整個html文檔 -> html下才能使用 element方法API
console.log(js_id.querySelector('div')) //<div>123</div>
// console.log(js_class.querySelector('div')) error
// console.log(js_name.querySelector('div')) error
</script>
</html>
http://blog.csdn.net/hj7jay/article/details/53389522
https://developer.mozilla.org/zh-CN/docs/Web/API
四、在集合內查找dom
1、HTMLcollection下可以使用 ，通過編號或名稱索引一個 HTMLCollection 對象，也可以調用 item() 方法和 namedItem() 方法。
| 屬性 length | 只讀屬性，返回指示列表長度的整數（即集合中的元素數）。 |
| [] | 返回集合中 指定index位置的元素,name 屬性或 id 屬性具有指定值的元素（節點） |
| item() | 返回集合中指定位置的元素（節點）。 |
| namedItem() | 返回集合中 name 屬性或 id 屬性具有指定值的元素（節點）。 |
<body>
<form action="" name="form_name">
<input type="text" name="text">
<select name="sel" id="sel">
<option value="1">1</option>
<option value="2">3</option>
</select>
</form>
</body>
<script>
// 二級查找在集合內查找 dom
// HTMLcollection [],item,namedItem
var js_forms=document.forms;
console.log(js_forms[0],js_forms['form_name'],js_forms['form1'])
console.log(js_forms.item(0),js_forms.namedItem('form_name'))
//得到 相同的html
</script>
2、HTMLcollection下可以使用 ,通過編號一個 HTMLCollection 對象，也可以調用 item() 方法,屬性 length
// nodeList var nodeList=document.querySelectorAll('#form1') console.log(nodeList[0],nodeList.item(0))
// 配合for 遍歷dom var js_set=document.getElementById('sel') var x=js_set.childNodes; for (i=0;i<x.length;i++) { document.write(x.item(i).nodeName+x.item(i).nodeType) document.write("<br />") }
好好學習，天天向上！！