文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問，以改變文檔的結構，樣式和內容。
DOM 提供了一種表述形式將文檔作為一個結構化的節點組以及包含屬性和方法的對象。從本質上說，它將web 頁面和腳本或編程語言連接起來了。
要改變頁面的某個東西，JavaScript就需要獲得對HTML文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過DOM來獲得的
document 對象
每個載入瀏覽器的HTML文檔都會成為document對象。document對象包含了文檔的基本信息，我們可以通過JavaScript對HTML頁面中的所有元素進行訪問、修改。
document對象常用屬性
document對象有很多屬性來描述文檔信息，介紹幾個常用的
doctype
在書寫HTML文檔的時候第一句一般都是doctype聲明，可以通過document對象獲取，沒有則返回null
document.doctype; // <!DOCTYPE html>
document.doctype.name; // "html"
head、body
document.head;
document.body;
通過這兩個屬性何以分別獲取文檔的head，body節點
activeElement
activeElement屬性返回當前文檔中獲得焦點的那個元素。
用戶通常可以使用tab鍵移動焦點，使用空格鍵激活焦點，比如如果焦點在一個鏈接上，此時按一下空格鍵，就會跳轉到該鏈接
documentURI、domain、lastModified
- documentURI屬性返回當前文檔的網址
- domain屬性返回文檔域名
- lastModified返回當前文檔的最后修改時間
location
location屬性返回一個只讀對象，提供了當前文檔的URL信息
// 假定當前網址為http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"
// 跳轉到另一個網址
document.location.assign('http://www.google.com')
// 優先從服務器重新加載
document.location.reload(true)
// 優先從本地緩存重新加載（默認值）
document.location.reload(false)
// 跳轉到另一個網址，但當前文檔不保留在history對象中，
// 即無法用后退按鈕，回到當前文檔
document.location.assign('http://www.google.com')
// 將location對象轉為字符串，等價于document.location.href
document.location.toString()
雖然location屬性返回的對象是只讀的，但是可以將URL賦值給這個屬性，網頁就會自動跳轉到指定網址。
document.location = 'http://www.example.com';
// 等價于
document.location.href = 'http://www.example.com';
title、characterSet
title屬性返回當前文檔的標題，該屬性是可寫的
characterSet屬性返回渲染當前文檔的字符集
readyState
readyState屬性返回當前文檔的狀態，共有三種可能的值
loading：加載HTML代碼階段，尚未完成解析
interactive：加載外部資源階段
complete：全部加載完成
compatMode
compatMode屬性返回瀏覽器處理文檔的模式，可能的值為
BackCompat：向后兼容模式，也就是沒有添加DOCTYPE
CSS1Compat：嚴格模式，添加了DOCTYPE
cookie
cookie是存儲在客戶端的文本，后續在客戶端存儲章節會介紹到
innerText
innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容
<div>
<p>
123
<span>456</span>
</p>
</div>
外層div的innerText返回內容是 "123456"
innerHTML、outerHTML
innerHTML屬性作用和innerText類似，但是不是返回元素的文本內容，而是返回元素的HTML結構，在寫入的時候也會自動構建DOM
<div>
<p>
123
<span>456</span>
</p>
</div>
外層div的innerHTML返回內容是 "<p>123<span>456</span></p>"
outerHTML 返回內容還包括本身
document對象常用方法
open()、close()
document.open方法用于新建一個文檔，供write方法寫入內容。它實際上等于清除當前文檔，重新寫入內容
document.close方法用于關閉open方法所新建的文檔。一旦關閉，write方法就無法寫入內容了。
write()
document.write方法用于向當前文檔寫入內容。只要當前文檔還沒有用close方法關閉，它所寫入的內容就會追加在已有內容的后面。
document.open();
document.write("hello");
document.write("world");
document.close();
如果頁面已經渲染完成再調用write方法，它會先調用open方法，擦除當前文檔所有內容，然后再寫入。
如果在頁面渲染過程中調用write方法，并不會調用open方法。
需要注意的是，雖然調用close方法之后，無法再用write方法寫入內容，但這時當前頁面的其他DOM節點還是會繼續加載。
除了某些特殊情況，應該盡量避免使用document.write這個方法。
Element
除了document對象，在DOM中最常用的就是Element對象了，Element對象表示HTML元素。
Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點，DOM提供了一系列的方法可以進行元素的增、刪、改、查操作
Element有幾個重要屬性
- nodeName：元素標簽名，還有個類似的tagName
- nodeType：元素類型
- className：類名
- id：元素id
- children：子元素列表（HTMLCollection）
- childNodes：子元素列表（NodeList）
- firstChild：第一個子元素
- lastChild：最后一個子元素
- nextSibling：下一個兄弟元素
- previousSibling：上一個兄弟元素
- parentNode、parentElement：父元素
查詢元素
- getElementById()
getElementById方法返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法
var elem = document.getElementById("test");
- getElementsByClassName()
getElementsByClassName方法返回一個類似數組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
var elements = document.getElementsByClassName(names);
getElementsByClassName方法的參數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素。
document.getElementsByClassName('red test');
- getElementsByTagName()
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
var paras = document.getElementsByTagName("p");
上面代碼返回當前文檔的所有p元素節點。注意，getElementsByTagName方法會將參數轉為小寫后，再進行搜索。
- getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
// 假定有一個表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
注意，在IE瀏覽器使用這個方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設為不一樣的值。
- querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法無法選中CSS偽元素。
- querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的參數，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素。
- elementFromPoint()
elementFromPoint方法返回位于頁面指定位置的元素。
var element = document.elementFromPoint(x, y);
上面代碼中，elementFromPoint方法的參數x和y，分別是相對于當前窗口左上角的橫坐標和縱坐標，單位是CSS像素。
elementFromPoint方法返回位于這個位置的DOM元素，如果該元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）。如果坐標值無意義（比如負值），則返回null。
創建元素
- createElement()
createElement方法用來生成HTML元素節點。
var newDiv = document.createElement("div");
createElement方法的參數為元素的標簽名，即元素節點的tagName屬性。如果傳入大寫的標簽名，會被轉為小寫。如果參數帶有尖括號（即<和>）或者是null，會報錯。
- createTextNode()
createTextNode方法用來生成文本節點，參數為所要生成的文本節點的內容。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
上面代碼新建一個div節點和一個文本節點
- createDocumentFragment()
createDocumentFragment方法生成一個DocumentFragment對象。
var docFragment = document.createDocumentFragment();
DocumentFragment對象是一個存在于內存的DOM片段，但是不屬于當前文檔，常常用來生成較復雜的DOM結構，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發網頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現。
修改元素
- appendChild()
在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- insertBefore()
在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
- replaceChild()
replaceChild()接受兩個參數：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);
刪除元素
刪除元素使用removeChild()方法即可
parentNode.removeChild(childNode);
clone元素
cloneNode()方法用于克隆元素，方法有一個布爾值參數，傳入true的時候會深復制，也就是會復制元素及其子元素（IE還會復制其事件），false的時候只復制元素本身
node.cloneNode(true);
屬性操作
- getAttribute()
getAttribute()用于獲取元素的attribute值
node.getAttribute('id');
- createAttribute()
createAttribute()方法生成一個新的屬性對象節點，并返回它。
attribute = document.createAttribute(name);
createAttribute方法的參數name，是屬性的名稱。
- setAttribute()
setAttribute()方法用于設置元素屬性
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
等同于
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
- romoveAttribute()
removeAttribute()用于刪除元素屬性
node.removeAttribute('id');
- element.attributes
當然上面的方法做的事情也可以通過類操作數組屬性element.attributes來實現
HTMLCollection和NodeList
我們知道Element對象表示元素，那么多個元素的集合一般有兩種數據類型
NodeList 對象代表一個有順序的節點列表，HTMLCollection 是一個接口，表示 HTML 元素的集合，它提供了可以遍歷列表的方法和屬性
以下方法獲取的為HTMLCollection對象
document.images //所有img元素
document.links //所有帶href屬性的a元素和area元素
document.anchors //所有帶name屬性的a元素
document.forms //所有form元素
document.scripts //所有script元素
document.applets //所有applet元素
document.embeds //所有embed元素
document.plugins //document.與embeds相同
document.getElementById("table").children
document.getElementById("table").tBodies
document.getElementById("table").rows
document.getElementById("row").cells
document.getElementById("Map").areas
document.getElementById("f2").elements //HTMLFormControlsCollection extends HTMLCollection
document.getElementById("s").options //HTMLOptionsCollection extends HTMLCollection
以下方法獲取的為NodeList對象
document.getElementsByName("name1")
document.getElementsByClassName("class1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.getElementById("table").childNodes
document.styleSheets //StyleSheetList，與NodeList類似
HTMLCollection與NodeList有很大部分相似性
- 都是類數組對象，都有length屬性，可以通過for循環迭代
- 都是只讀的
- 都是實時的，即文檔的更改會立即反映到相關對象上面(有一個例外，document.querySelectorAll返回的NodeList不是實時的)
- 都有item()方法，可以通過item(index)或item("id")獲取元素
不同點在于
- HTMLCollection對象具有namedItem()方法，可以傳遞id或name獲得元素
- HTMLCollection的item()方法和通過屬性獲取元素(document.forms.f1)可以支持id和name，而NodeList對象只支持id
