DOM是JavaScript操作網頁的接口，全稱為”文檔對象模型“（Document Object Model）。它的作用是將網頁轉為一個JavaScript對象，從而可以用腳本進行各種操作（比如增刪內容）。
瀏覽器會根據DOM模型，將結構化文檔（比如HTML和XML）解析成一系列節點，再由這些節點組成一個樹狀結構（DOM Tree）。所有的節點和最終的樹狀結構，都有規范的對外接口。所以，DOM可以理解成網頁的編程接口。
節點
DOM的最小組成單位叫做節點（node）。文檔的樹形結構（DOM樹），就是由各種不同類型的節點組成。
節點有七種類型：
- Document：整個文檔額頂層節點
- DocumentType：
doctype標簽（比如<! DOCTYPE html>） - Element：網頁的各種HTML標簽（比如<body>）
- Attribute：網頁元素的屬性（比如 color = "pink"）
- Text：標簽之間或標簽包含的文本
- 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屬性返回一個只讀對象，提供了當前文檔的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.open()、document.close()
document.open()方法用于新建一個文檔，write方法寫入內容。它實際上等于清除當前文檔，重新寫入內容
document.close()方法用于關閉open方法所新建的文檔。一旦關閉，write方法就無法寫入內容了。
document.write()
document.write()方法用于向當前文檔寫入內容。只要當前文檔還沒有用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：子元素列表（HTML Collection）
- childNodes：子元素列表（NodeList）
- firstChild：第一個子元素
- lastChild：最后一個子元素
- nextSibling：下一個兄弟元素
- previousSibling：上一個兄弟元素
- parentNode、parentElement：父元素
查詢元素
getElementById()
返回匹配指定ID屬性的元素節點。
var elem = document.ById('test'); //如果沒有發現匹配的節點，則返回null
getElementByClassName()
返回一個類似數組的對象（HTMLCollection類型的對象），包括所有class名字符合指定條件的元素。
var elements = document.getElementByClassName('tab');
var elements = document.ElementByClassName('red test');
//getElementsByClassName方法的參數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素
getElementByTagName()
方法返回所有指定標簽的元素。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
var paras = document.getElementByTagName('p');
//代碼返回當前文檔所有的p元素節點
getElementByName()
用于選擇擁有name屬性的HTML元素，例如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
//假設有個表單
<form name = 'x'></form>
var forms = document.getElementByName('x');
forms[0].tagName//"FORM"
//在IE瀏覽器使用這個方法，會將沒有name屬性，但有同名id屬性的元素也返回，所以name和id屬性最好設為不一樣的值。
querySelector()
querySelector()方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
var elem1 = document.querySelector(".myclass");
var elem2 = document.querySelector("#myclass");
querySelector方法無法選中CSS偽元素。
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。
elementList = document.querySelectorAll(selector);
querySelectorAll方法的參數，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素。
DOM操作未完待續。。。
