一、DOM:文檔對象模型，是由JavaScript節點對象組成的層次結構/樹
1、節點對象類型：nodeType(共用12種類型，僅列出了常用的幾個)
ELEMENT_NODE = 1 元素節點 如 ：<body> <div> <script> <html>
ATTRIBUTE_NODE = 2 屬性節點 如 ：<class> <href> <alt> <title>
TEXT_NODE = 3 文本節點 如 ：P標籤中的文字
COMMENT_NODE = 8 註釋節點
DOCUMENT_NODE = 9 DOM 樹的根節點 如 ：document
DOCUMENT_TYPE_NODE = 10 向爲文檔定義的實體提供接口 如: <!DOCTYPE html>
2、用於與節點打交道的屬性與方法
（1）節點屬性
.nodeType 節點對象類型
.childNodes (會獲取到空白節點,ie6-8除外。空白節點算做文本節點)
.children (僅獲取到元素節點，無兼容問題)
.firstChild (會獲取到空白節點,ie6-8除外，但會獲取到文本節點)
.firstElementChild (僅獲取元素節點，但ie6-8不支持)
.lastChild (會獲取到空白節點,ie6-8除外，但會獲取到文本節點)
.lastElementChild (僅獲取元素節點，但ie6-8不支持)
.nextSibling (會獲取到空白節點,ie6-8除外，但會獲取到文本節點)
.nextElementSibling (僅獲取元素節點，但ie6-8不支持)
.previousSibling (會獲取到空白節點,ie6-8除外，但會獲取到文本節點)
.previousElementSibling (僅獲取元素節點，但ie6-8不支持)
兼容處理，請移步http://blog.csdn.net/wstpa/article/details/50009323
.nodeName 元素節點的標籤名，大寫。 document -> #document 文本節點 -> #text (固定的)
.nodeValue 元素節點 ：nodeValue值始終爲null，document：null，文本節點：文本內容
.parentNode 父節點
（2）節點方法
.appendChild()
.insertBefore()
.removeChild()
.replaceChild()
.cloneNode() 默認是深複製(true)，但不復制元素的事件操作。可能導致重複的ID
.contains()
.compareDocumentPosition() 表示兩個節點彼此做比較的位置
.hasChildNodes()
.isEqualNode() 檢查兩個元素是否完全相等。如果只想知道兩個節點是否指向同一節點，可以直接用===操作符判斷
（3）文檔方法
。document.createElement()
。document.createTextNode()
（4）HTML*Element屬性
.innerHTML (用它就好，儘量不用innerText)請查看：http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.aspx
.outerHTML
.textContent
.innerText
.outerText
3、識別節點的類型與名稱
document.body.nodeType //1元素節點
document.body.nodeName //BODY
4、獲取節點的值，nodeValue
絕大多數節點類型（除了text和comment）的nodeValue值都是null。它的作用是獲取text和comment節點的實際文本字符串
document.body.nodeValue //null
5、JavaScript方法創建元素和文本節點
var oDiv = document.createElement('div');
var oText = document.createTextNode('hello world');
二、文檔節點
1、HTML文檔(document)屬性與方法(一些)
.doctype
.documentElement
.implementation.*
.activeElement 獲取文檔中當前聚焦/激活節點的引用
.body
.head
.title
.lastModified
.referrer
.URL
.defaultview 到達頂部/全局對象的捷徑，在web瀏覽器中頂部對象即window Object,在瀏覽器JavaScript環境中指向這個js對象
.compatMode
.ownerDocument 從某一元素獲得文檔的引用
.hasFocus() 判斷文檔或者文檔中任何節點得到焦點
2、獲取HTML Document通用信息(標題、鏈接、提及者、最後修改時間及兼容模式)
document.title
document.URL
document.referrer
document.lastModified
document.compatMode //BacKCompat （怪異模式） 和CSS1compat （嚴格模式）
3、文檔子節點
document節點可以包含一個DocumentType節點對象和一個Element節點對象。因爲通常HTML文檔只包含一個文檔類型（<!DOCTYPE html>）與一個元素節點（<html lang="n">）
4、document提供的捷徑
。document.doctype （<!DOCTYPE html>）
。document.documentElement (<html lang="n">)
。document.head (<head>)
。document.body(<body>)
5、document.implementation.hasFeature()探測DOM規範/特性
document.implementation.hasFeature()詢問當前文檔都實現/支持了哪些特性與層級，通過將該特性的名稱和版本作爲參數傳入hasFeature();
document.implementation.hasFeature('Core','3.0');
三、元素節點
HTML文檔中每個元素都有一個唯一的本源，即每個都有一個獨一無二的JavaScript構造函數，使這些元素實例化爲DOM數中的節點對象，例如，<a>元素是由HTMLAnchorElement()創建的。
1、HTML*Element對象屬性與方法
.createElement() 創建元素
.tagName 標籤名
.children
.getAttribute() 能獲取自定義的屬性，但是通過setAttribute設置自定義屬性會添加到元素的行間，用“.”操作符就不會
.setAttribute() 自定義的可以採用html5中的dataset
.hasAttribute() 判斷元素是否有某一特定屬性
.removeAttribute()
.dataset
.attributes 獲取元素屬性與值得列表/集合，返回的數組是實時的
2、獲取class屬性值列表 - classList
console.log(oDiv.classList) // DOMTokenList["a", "b", "c"]
console.log(oDiv.className) //a b c
classList自身只讀但是可以用add()、remove()、contains()、toggle()方法修改
3、獲取與設置data-*屬性 (IE9中不支持)
元素節點的dataset屬性提供了一個對象，包含改元素所有以data-*起始的屬性。因爲它就是一個JavaScript對象，我們可以操作dataset並反饋這些改動到DOM中的元素上。
<div data-foo-foo="foo" data-bar-bar="bar"></div>
//讀取
console.log(oDiv.dataset.fooFoo)
//設置
oDiv.dataset.gooGoo = "goo";
四、元素節點選取
1、選取特定的元素節點
使用這兩個方法無法查找帶僞類狀態的元素，比如querySelector(':hover')不會得到預期結果。
.querySelector() 將返回文檔中符合該選擇器的首個元素節點。
.querySelectorAll() 該方法返回所有滿足條件的元素，結果是個nodeList集合。但是該方法並不返回一個實時的元素列表
.getElementById()
.getElementsByTagName()
2、預定義的元素節點選取/列表
document.all HTML文檔中所有元素。FF不支持
document.forms HTML文檔中所有<form>元素
document.images HTML文檔中所有<img>元素
document.links HTML文檔中所有<a>元素
document.scripts HTML文檔中所有<script>元素
document.styleSheets HTML文檔中所有<link>或者<style>元素
3、使用matchesSelector()驗證元素是否被選取,返回true or false
例子：選擇了<ul>中首個<li>並詢問該元素是否匹配選擇器 li:first-child.
//需要加前綴
console.log(document.querySelector('li').matchesSelector('li:first-child'))
