DOM是JavaScript操作網(wǎng)頁的接口，全稱為”文檔對象模型“（Document Object Model）。它的作用是將網(wǎng)頁轉(zhuǎn)為一個JavaScript對象，從而可以用腳本進行各種操作（比如增刪內(nèi)容）。
瀏覽器會根據(jù)DOM模型，將結(jié)構(gòu)化文檔（比如HTML和XML）解析成一系列節(jié)點，再由這些節(jié)點組成一個樹狀結(jié)構(gòu)（DOM Tree）。所有的節(jié)點和最終的樹狀結(jié)構(gòu)，都有規(guī)范的對外接口。所以，DOM可以理解成網(wǎng)頁的編程接口。
節(jié)點
DOM的最小組成單位叫做節(jié)點（node）。文檔的樹形結(jié)構(gòu)（DOM樹），就是由各種不同類型的節(jié)點組成。
節(jié)點有七種類型：
- Document：整個文檔額頂層節(jié)點
- DocumentType：
doctype標(biāo)簽（比如<! DOCTYPE html>） - Element：網(wǎng)頁的各種HTML標(biāo)簽（比如<body>）
- Attribute：網(wǎng)頁元素的屬性（比如 color = "pink"）
- Text：標(biāo)簽之間或標(biāo)簽包含的文本
- Comment：注釋
- DocumentFragment：文檔的片段
document對象
每個載入瀏覽器的HTML文檔都會成為document對象。document對象包含了文檔的基本信息，我們可以通過JavaScript對HTML頁面中的所有元素進行訪問、修改。
document對象常用屬性
- document.doctype
- document.title
- document.characterSet
- document.head
- document.body
- document.images
document.location
document.location也可直接使用location
document.location === location //true
document.location === window.location //true\
//location屬性返回一個只讀對象，提供了當(dāng)前文檔的URL信息
// 假定當(dāng)前網(wǎng)址為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.open()、document.close()
document.open()方法用于新建一個文檔，write方法寫入內(nèi)容。它實際上等于清除當(dāng)前文檔，重新寫入內(nèi)容
document.close()方法用于關(guān)閉open方法所新建的文檔。一旦關(guān)閉，write方法就無法寫入內(nèi)容了。
document.write()
document.write()方法用于向當(dāng)前文檔寫入內(nèi)容。只要當(dāng)前文檔還沒有用close方法關(guān)閉，它寫入的內(nèi)容就會追加再已有內(nèi)容后面。
如果頁面已將渲染完成再調(diào)用write方法，它會先調(diào)用open方法，擦除當(dāng)前文檔所有內(nèi)容，然后再寫入。
注：
- 如果在頁面渲染過程中調(diào)用write方法，并不會調(diào)用open方法。
- 雖然調(diào)用close方法之后，無法再用write方法寫入內(nèi)容，但這時當(dāng)前頁面的其他DOM節(jié)點還是會繼續(xù)加載。
- 除了某些特殊情況，應(yīng)該盡量避免使用document.write這個方法。
Element
除了document對象，在DOM中最常用的就是Element對象了，Element對象表示HTML元素。
Element對象可以擁有類型為元素節(jié)點、文本節(jié)點、注釋節(jié)點、的子節(jié)點，DOM提供了一系列的方法可以進行元素的增、刪、改、查操作
Element的重要屬性
- nodeName：元素標(biāo)簽名，還有個類似的tagName
- nodeType：元素類型
- className：類名
- id：元素id
- children：子元素列表（HTML Collection）
- childNodes：子元素列表（NodeList）
- firstChild：第一個子元素
- lastChild：最后一個子元素
- nextSibling：下一個兄弟元素
- previousSibling：上一個兄弟元素
- parentNode、parentElement：父元素
查詢元素
getElementById()
返回匹配指定ID屬性的元素節(jié)點。
var elem = document.ById('test'); //如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null
getElementByClassName()
返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括所有class名字符合指定條件的元素。
var elements = document.getElementByClassName('tab');
var elements = document.ElementByClassName('red test');
//getElementsByClassName方法的參數(shù)，可以是多個空格分隔的class名字，返回同時具有這些節(jié)點的元素
getElementByTagName()
方法返回所有指定標(biāo)簽的元素。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用。
var paras = document.getElementByTagName('p');
//代碼返回當(dāng)前文檔所有的p元素節(jié)點
getElementByName()
用于選擇擁有name屬性的HTML元素，例如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
//假設(shè)有個表單
<form name = 'x'></form>
var forms = document.getElementByName('x');
forms[0].tagName//"FORM"
//在IE瀏覽器使用這個方法，會將沒有name屬性，但有同名id屬性的元素也返回，所以name和id屬性最好設(shè)為不一樣的值。
querySelector()
querySelector()方法返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。
var elem1 = document.querySelector(".myclass");
var elem2 = document.querySelector("#myclass");
querySelector方法無法選中CSS偽元素。
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中。
elementList = document.querySelectorAll(selector);
querySelectorAll方法的參數(shù)，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素。
DOM操作未完待續(xù)。。。
