一 什么的DOM
簡單地說，DOM就是一套對文檔內(nèi)容進(jìn)行抽象和概念化地方法。DOM的英文全名為(Document Object Model)
- DOM中的 "D"
document 即文檔，它可將你編寫的網(wǎng)頁文檔轉(zhuǎn)換為一個(gè)文檔對象。 - DOM中的 "O"
object 即對象，對象是一種自足的數(shù)據(jù)集合。與某個(gè)對象相關(guān)聯(lián)的變量稱為這個(gè)對象的屬性，只能通過某個(gè)特定對象去調(diào)用的函數(shù)稱為這個(gè)對象的方法。每個(gè)節(jié)點(diǎn)都是一個(gè)對象。 -
DOM中的 "M"
model 即模型，節(jié)點(diǎn)樹就是一種模型HTML中的各類標(biāo)簽的相互嵌套構(gòu)成了模型。
HTML DOM樹
二 節(jié)點(diǎn)（node）
文檔是由節(jié)點(diǎn)構(gòu)成的集合,DOM節(jié)點(diǎn)可以包含其他類型的節(jié)點(diǎn)，具有嵌套關(guān)系而不是獨(dú)立存在的。其中三種節(jié)點(diǎn)為：元素節(jié)點(diǎn)、文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)。
1）元素節(jié)點(diǎn)
元素節(jié)點(diǎn)是DOM的原子，即HTML的基本元素，如<body>、<p>和<ul>之類的元素。
沒有被包含在其他元素里的唯一的元素是<html>元素，它是節(jié)點(diǎn)樹的根元素。
2）文本節(jié)點(diǎn)
元素節(jié)點(diǎn)只是節(jié)點(diǎn)類型的一種，例如<p>元素中包含著文本"hello topview!"，它就是一個(gè)文本節(jié)點(diǎn)。文節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)的內(nèi)部，但也有例外，如表格元素<ul>，只包含元素節(jié)點(diǎn)。
3）屬性節(jié)點(diǎn)
屬性節(jié)點(diǎn)用來對元素做出更具體的描述。因?yàn)閷傩钥偸潜环旁谄鹗紭?biāo)簽中，所以屬性節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)中。并非所有的元素都包含屬性，但所有的屬性都被元素包含。
三 獲取元素
有三種DOM方法可以獲取元素節(jié)點(diǎn)，分別是通過元素ID，通過標(biāo)簽名字和通過類名字來獲取。
1）getElementById
這個(gè)方法將放回一個(gè)與那個(gè)有著給定id屬性值的元素節(jié)點(diǎn)對應(yīng)的對象。參數(shù)為標(biāo)簽的名字。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Shopping list</title>
</head>
<body>
<ul id="purchases">
<li>Atin of beans</li>
</ul>
<script>
alert(typeof document.getElementById("purchases"));
</script>
</body>
</html>
這個(gè)調(diào)用將會(huì)返回一個(gè)對象，在瀏覽器中加載這個(gè)文件，會(huì)彈出一個(gè)alert對話框，它向你們報(bào)告 document.getElementById("purchases")的類型，是一個(gè)對象。即對話框會(huì)顯示 "object"。
2）getElementByTagName
getElementByTagName 方法返回一個(gè)對象數(shù)組，它的參數(shù)是標(biāo)簽的名字。
下面這個(gè)例子會(huì)返回一個(gè)列表項(xiàng)元素的個(gè)數(shù) 3。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Shopping list</title>
</head>
<body>
<ul id="purchases">
<li>Atin of beans</li>
<li>Atin of beans</li>
<li>Atin of beans</li>
</ul>
<script>
alert(document.getElementsByTagName("li").length);
</script>
</body>
</html>
另外getElementByTagName允許把一個(gè)通配符作為它的參數(shù)。
通配符是一種特殊語句，主要有星號(*)和問號(?)，用來模糊搜索文件。 當(dāng)查找文件夾時(shí)，可以使用它來代替一個(gè)或多個(gè)真正字符；當(dāng)不知道真正字符或者懶得輸入完整名字時(shí)，常常使用通配符代替一個(gè)或多個(gè)真正的字符。
可以通過下面的代碼返回一份文檔中元素節(jié)點(diǎn)的總數(shù)。
alert(document.getElementsByTagName("*").length);
3）getElementsByClassName
這個(gè)方法可以通過class屬性中的類名來訪問元素。與getElementsByTagName方法相似，getElementsByClassName也只接受一個(gè)參數(shù)，就是類名。
alert(document.getElementsByClassName("sale"));
使用這個(gè)方法還可以查找那些帶有多個(gè)類名的元素，要指定多個(gè)類名，只要在字符串參數(shù)中使用空格分隔類名即可。例如：
alert(document.getElementsByClassName("important sale").length);
如果警告框顯示1，則表示只有一個(gè)元素匹配，即只有一個(gè)元素同時(shí)帶有兩個(gè)類名。
注意類名的實(shí)際順序和個(gè)數(shù)不重要，或者說沒有限制。
四 獲取和設(shè)置屬性
上面講的是三種獲取特定元素的方法，下面說的是獲取元素后對其屬性進(jìn)行獲取和設(shè)置的方法。getAttribute方法可以用來獲取屬性，setAttribute方法可以用來更改屬性節(jié)點(diǎn)的值。
1）getAttribute
getAttribute是一個(gè)函數(shù)，只有一個(gè)參數(shù)——你打算查詢的屬性的名字。
object.getAttribute(attribute);
與上面學(xué)的方法不同，getAttribute方法不屬于document對象，所以不能通過document對象調(diào)用，它只能通過元素節(jié)點(diǎn)對象調(diào)用，例如下面的例子，可以與getElementByTagName方法合用，獲取每個(gè)<p>元素的title屬性。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Shopping list</title>
</head>
<body>
<p title="a gentle reminder">Don't forget me!</p>
<p>hello world!</p>
<ul id="purchases">
<li>Atin of beans</li>
<li>Atin of beans</li>
<li>Atin of beans</li>
</ul>
<script>
var paras = document.getElementsByTagName("p");
for (var i = 0; i < paras.length; i++) {
var title_text = paras[i].getAttribute("title");
if (title_text) alert(title_text);
}
</script>
</body>
</html>
2）setAttribute
setAttribute()方法允許我們對某些節(jié)點(diǎn)的屬性做出更改，和getAttribute一樣，setAttribute只能用于元素節(jié)點(diǎn)。
object.setAttribute(attribute, value);
以下代碼先從文檔中獲取全部帶有title屬性的<p>元素，然后把他們的title屬性值都修改為zhong，原先的屬性值會(huì)被覆蓋。值得注意的是。文檔源代碼中title屬性仍然是改變前的值，也就是說，setAttribute做出的修改不會(huì)反映到文檔本身的源代碼中。DOM的工作模式是先加載文檔的靜態(tài)內(nèi)容，再動(dòng)態(tài)刷新，動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。也就是說，DOM可以對頁面進(jìn)行動(dòng)態(tài)刷新卻不需要在瀏覽器中刷新界面。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Shopping list</title>
</head>
<body>
<p title="a gentle reminder">Don't forget me!</p>
<p>hello world!</p>
<ul id="purchases">
<li>Atin of beans</li>
<li>Atin of beans</li>
<li>Atin of beans</li>
</ul>
<script>
var paras = document.getElementsByTagName("p");
for (var i = 0; i < paras.length; i++) {
var title_text = paras[i].getAttribute("title");
if (title_text) {
paras[i].setAttribute("title","zhong");
alert(paras[i].getAttribute("title"));
}
}
</script>
</body>
</html>
注意以下的寫法是錯(cuò)誤的：
var paras = document.getElementsByTagName("p");
for (var i = 0; i < paras.length; i++) {
var title_text = paras[i].setAttribute("title","zhong");
if (title_text) {
//paras[i].setAttribute("title","zhong");
alert(paras[i].getAttribute("title"));
}
}
setAttribute（）只能單獨(dú)使用，不能賦值給某個(gè)變量。
