一 什么的DOM
簡(jiǎn)單地說(shuō)灌曙，DOM就是一套對(duì)文檔內(nèi)容進(jìn)行抽象和概念化地方法羽利。DOM的英文全名為(Document Object Model)
- DOM中的 "D"
document 即文檔烙荷，它可將你編寫的網(wǎng)頁(yè)文檔轉(zhuǎn)換為一個(gè)文檔對(duì)象褒墨。 - DOM中的 "O"
object 即對(duì)象敬肚，對(duì)象是一種自足的數(shù)據(jù)集合菜循。與某個(gè)對(duì)象相關(guān)聯(lián)的變量稱為這個(gè)對(duì)象的屬性捅膘，只能通過(guò)某個(gè)特定對(duì)象去調(diào)用的函數(shù)稱為這個(gè)對(duì)象的方法添祸。每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。 -
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>之類的元素混坞。
沒(méi)有被包含在其他元素里的唯一的元素是<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)用來(lái)對(duì)元素做出更具體的描述绘趋。因?yàn)閷傩钥偸潜环旁谄鹗紭?biāo)簽中颤陶，所以屬性節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)中。并非所有的元素都包含屬性陷遮，但所有的屬性都被元素包含滓走。
三 獲取元素
有三種DOM方法可以獲取元素節(jié)點(diǎn)，分別是通過(guò)元素ID帽馋，通過(guò)標(biāo)簽名字和通過(guò)類名字來(lái)獲取搅方。
1）getElementById
這個(gè)方法將放回一個(gè)與那個(gè)有著給定id屬性值的元素節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象。參數(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è)對(duì)象腰懂，在瀏覽器中加載這個(gè)文件，會(huì)彈出一個(gè)alert對(duì)話框项秉，它向你們報(bào)告 document.getElementById("purchases")的類型绣溜，是一個(gè)對(duì)象。即對(duì)話框會(huì)顯示 "object"娄蔼。
2）getElementByTagName
getElementByTagName 方法返回一個(gè)對(duì)象數(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ù)锚沸。
通配符是一種特殊語(yǔ)句，主要有星號(hào)(*)和問(wèn)號(hào)(?)涕癣，用來(lái)模糊搜索文件哗蜈。 當(dāng)查找文件夾時(shí)，可以使用它來(lái)代替一個(gè)或多個(gè)真正字符坠韩；當(dāng)不知道真正字符或者懶得輸入完整名字時(shí)距潘，常常使用通配符代替一個(gè)或多個(gè)真正的字符。
可以通過(guò)下面的代碼返回一份文檔中元素節(jié)點(diǎn)的總數(shù)只搁。
alert(document.getElementsByTagName("*").length);
3）getElementsByClassName
這個(gè)方法可以通過(guò)class屬性中的類名來(lái)訪問(wèn)元素音比。與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ù)不重要陷猫，或者說(shuō)沒(méi)有限制。
四 獲取和設(shè)置屬性
上面講的是三種獲取特定元素的方法的妖，下面說(shuō)的是獲取元素后對(duì)其屬性進(jìn)行獲取和設(shè)置的方法。getAttribute方法可以用來(lái)獲取屬性足陨，setAttribute方法可以用來(lái)更改屬性節(jié)點(diǎn)的值嫂粟。
1）getAttribute
getAttribute是一個(gè)函數(shù)，只有一個(gè)參數(shù)——你打算查詢的屬性的名字墨缘。
object.getAttribute(attribute);
與上面學(xué)的方法不同星虹，getAttribute方法不屬于document對(duì)象，所以不能通過(guò)document對(duì)象調(diào)用镊讼，它只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(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()方法允許我們對(duì)某些節(jié)點(diǎn)的屬性做出更改，和getAttribute一樣玩裙，setAttribute只能用于元素節(jié)點(diǎn)兼贸。
object.setAttribute(attribute, value);
以下代碼先從文檔中獲取全部帶有title屬性的<p>元素，然后把他們的title屬性值都修改為zhong吃溅，原先的屬性值會(huì)被覆蓋溶诞。值得注意的是。文檔源代碼中title屬性仍然是改變前的值决侈，也就是說(shuō)螺垢，setAttribute做出的修改不會(huì)反映到文檔本身的源代碼中。DOM的工作模式是先加載文檔的靜態(tài)內(nèi)容赖歌，再動(dòng)態(tài)刷新枉圃，動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。也就是說(shuō)俏站，DOM可以對(duì)頁(yè)面進(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è)變量肄扎。
