DOM
文檔：D
Document（文檔），他把你編寫的網(wǎng)頁文檔轉(zhuǎn)換為一個文檔對象。
對象：O
Object（對象），是一種自足的數(shù)據(jù)集合，與某個對象關聯(lián)的變量稱為這個對象的屬性；只能通過某個特定的對象去調(diào)用的函數(shù)成為這個對象的方法。
js利得對象可以氛圍三個類型
- 用戶定義對象（user-defined object）：有程序員自行創(chuàng)建的對象。
- 內(nèi)建對象（native object）：內(nèi)建在js里的對象，如Array，Math，和Date等。
- 宿主對象（host object）：由瀏覽器提供的對象。
在js的最初版本里，一些對編寫腳本非常重要的宿主對象就已經(jīng)可用了，他們當中最基礎的對象是window對象。
window對象對應著瀏覽器窗口本身，這個對象的屬性和方法通常統(tǒng)稱為BOM（瀏覽器對象模型）。
模型：M
Model（模型），也可以說是map。含義都是某種事物的表現(xiàn)形式。就像一個火車模型代表著一列火車，一張城市街道圖代表一個實際存在的城市，DOM代表加載到瀏覽器窗口的網(wǎng)頁。瀏覽器提供網(wǎng)頁的地圖（模型），我們通過js去讀取這張地圖。
既然是地圖，就必須有方向，等高線，比例尺的圖例。要想看懂和使用地圖，必須知道圖例的含義和用途。
DOM把一份文檔表示為一棵樹，家譜樹。家譜樹本身也是一種模型，適合編寫HTML，<html>為根元素，代表了整個文檔，<head>和<body>位于統(tǒng)一層次互不包含，為兄弟關系，有共同的父元素，也有各自的子元素。
節(jié)點
節(jié)點（node）文檔是節(jié)點的集合，DOM包含了很多類型的節(jié)點。
元素節(jié)點
我們使用了<html><body><head>之類的元素，元素是制造web文檔大廈的磚塊，在文檔的布局中形成了文檔的結(jié)構。
文本節(jié)點
如果文檔只有一些空白元素構成，他將有一個結(jié)構，但是文檔本身并不包括任何內(nèi)容。
例如<P>元素包含了文本“don't be silly”。它是一個文本節(jié)點。
在html中，文本節(jié)點總是被包含在元素節(jié)點的內(nèi)部，但并非所有元素節(jié)點都包括問問節(jié)點。
屬性節(jié)點
屬性節(jié)點用來對元素做出更具體的描述。例如所有元素都有一個tittle屬性。
我們可以利用這個屬性對包含在元素里的東西做出準確的描述。
獲取元素
有三種DOM方法可以獲取元素節(jié)點，分別是通過元素ID，標簽名字，類名字來獲取。
1. getElementById
DOM提供getElemnetById的方法，講返回一個有個給定的id屬性的元素節(jié)點對應的對象。注意大小寫
這是document對象的特有函數(shù)。在腳本代碼里，函數(shù)名后面必須有一個括號，包含函數(shù)的參數(shù)，getElementById方法的參數(shù)只有一個參數(shù)：元素的ID，ID的值必須放在單引號或者雙引號里。
document.getElementById ("purchases")
這個操作將返回一個對象，對應著一個元素。還可以使用typeof來驗證，告訴我們這個操作數(shù)是一個字符串 數(shù)值 函數(shù)還是對象。
在html中添加以下代碼
<script>
alert(typeof doucument.getElementById("purchases"))
</script>
之后加載這個html文件，會彈出一個alert對話框，“object”，它是一個對象。
文檔中每一個元素都是一個對象
2. getElementsByTagName
這個方法返回一個對象數(shù)組。‘
getElementsByTagName("li")
這個調(diào)用將返回一個對象數(shù)組，每個對象分別對應著document對象中的一個列表項元素。和其他數(shù)組一樣，可以使用length屬性查出這個數(shù)組里的額元素個數(shù)。
getElementsByTagName("li".length)；
會的到個數(shù)：3，這個數(shù)組里每個元素都是一個對象。可以用一個循環(huán)語句和typeof來驗證。
for(var i = 0; i < getElementsByTageName("li".length);i++);｛
alert(typeof doucument.getElementsByTageName("li")[i];
}
如果你覺得getElementsByTagName("li")是一個很麻煩輸入的字，而且長長的代碼影響可讀性，可以將它賦值給一個變量：
var item = getElementsByTagName("li");
getElementsByTagName
允許把通配符作為它的參數(shù)，如果你想知道一個文檔里有多少個元素節(jié)點：
alert(getElementsByTagName("*").length);
3. getElementsByClassName
也只接受一個參數(shù)（類名），返回值也是一個具有相同類名的元素的數(shù)組。
小結(jié)
文檔的每個元素節(jié)點都是一個對象，每個對象天生具有一些列的非常有用的方法。歸功于DOM，利用預先定義好的方法，可以檢索對象信息，還可以改變元素屬性。
- 一份文檔就是一個節(jié)點樹。
- 借點分為不同類型：元素節(jié)點，屬性節(jié)點和文本節(jié)點等。
-
getElementById返回一個對象，對象對應著文檔里的一個特定的元素節(jié)點。 -
getElementByTagName和getElementByClassName將返回一個數(shù)組，分別對應一組特定的元素節(jié)點。 - 每一個節(jié)點都是一個對象。
獲取和設置屬性
以上有三種獲取元素的方法，得到需要的元素之后，我們可以設法獲取它的各個屬性。getAttribute用來獲取屬性，setAttribute用來更改屬性節(jié)點的值。
getAttribute
getAttribute是一個函數(shù)。他只有一個參數(shù)--你準備查詢的屬性名字：
object.getAttribute（attribute）
**與之前介紹過的那些方法不同，getAttribute不屬于document對象，不能通過document調(diào)用。只能通過元素節(jié)點對象調(diào)用。
document.getElementsByTageName("p").getAttribute("tittle");
setAttribute
之前介紹的方法都是獲取信息。setAttribute是用來對屬性節(jié)點的值做出修改。與getAttribute一樣，setAttribute也只適用于元素節(jié)點。
object.setAttribute(attribute,value)
例如：
var shopping = document.getElementById("purchases");
shopping.setAttribute("tittle","a list of goods");
我們設置了一個節(jié)點的tittle屬性，如果原先不存在。表明setAttribute實際完成了兩項操作，創(chuàng)建再設置，用在存在的屬性上，值會覆蓋。
通過setAttribute對文檔修改后，查看源代碼，不會改變。做出的修改不會反映在文檔本身的源代碼里。原因：DOM的工作模式，先加載靜態(tài)內(nèi)容，再動態(tài)刷新。
總結(jié)
- getElementById
- getElementsByTagName
- getElementsByClassName
- getAttribute
- setAttribute
這五個方法是DOM腳本的基石。
