在很久之前讀過JavaScript Dom 編程藝術(shù)，現(xiàn)在重讀又有新的體會(huì)，遂記錄下。
什么是DOM
對(duì)于這種英文縮寫，首先看它的英文全拼--Document Object Model，即文檔對(duì)象模型。DOM把一份文檔表示為一棵樹，這是理解DOM模型的關(guān)鍵。是由節(jié)點(diǎn)（node）構(gòu)成的一棵節(jié)點(diǎn)樹。
關(guān)于節(jié)點(diǎn)
DOM中有許多不同類型的節(jié)點(diǎn)。其中最重要的有三種：元素節(jié)點(diǎn)（element node），文本節(jié)點(diǎn)（text node）和屬性節(jié)點(diǎn)（attribute node）。
元素節(jié)點(diǎn)
元素節(jié)點(diǎn)是DOM的原子，比如<body>，<p>和<ul>等。
元素可以包含其他元素。唯一沒有被其他元素包含的元素是<html>元素，它是DOM的根元素。
文本節(jié)點(diǎn)
比如<p>it is a test</p>，“it is a test”就是一個(gè)文本節(jié)點(diǎn)。
文本節(jié)點(diǎn)總是包含在元素節(jié)點(diǎn)內(nèi)部。
“it is a test”是<p>節(jié)點(diǎn)內(nèi)的第一個(gè)子節(jié)點(diǎn)，所以p.nodeVAlue將是一個(gè)null值，應(yīng)該寫成p.childNode[0].nodeValue,才能得到“it is a test”。
屬性節(jié)點(diǎn)
比如<p title="hehe">it is a test</p>，title="hehe"就是屬性節(jié)點(diǎn)，用來對(duì)元素做出更具體的描述。
屬性總是被放在開始標(biāo)簽里，所以屬性節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)中。
DOM操作
DOM操作無非是增刪改查，我們先看查和改。
getElementById
這個(gè)方法返回一個(gè)與那個(gè)有著給定 id 屬性值的節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象。
這是DOM 查 的一個(gè)方法。
getElementsByTagName
這個(gè)方法返回一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象對(duì)應(yīng)著這個(gè)標(biāo)簽的一個(gè)元素。
可以使用數(shù)組的length方法，document.getElementsByTagName("li").length。
這是DOM 查 的一個(gè)方法。
getElementsByClassName
這是HTML5 DOM中新增的一個(gè)方法。接受類名參數(shù)返回一個(gè)具有相同類名的元素的數(shù)組，同樣可以使用數(shù)組方法length。
只有較新的瀏覽器支持這個(gè)方法，書里給出了代碼可以自己為為老瀏覽器實(shí)現(xiàn)這個(gè)方法：
function getElementsByClassName(node, classname){
if(node.getElementsByClassName){
//使用現(xiàn)有方法
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0; i<elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
這個(gè)函數(shù)接收兩個(gè)參數(shù)。第一個(gè)node表示DOM樹中的搜索起點(diǎn)，第二個(gè)classname就是要搜索的類名了。
這是DOM 查 的一個(gè)方法。
getAttribute
這個(gè)方法只有一個(gè)參數(shù)--打算查詢的屬性的名字。
這是DOM 查 的一個(gè)方法。而且是查詢屬性節(jié)點(diǎn)的方法。
setAttribute
這個(gè)方法接收兩個(gè)參數(shù)，第一個(gè)是要修改的屬性名字，第二個(gè)是做出的修改的值。
object.setAttribute(attribute, value)
這是DOM 改 的一個(gè)方法。并且是修改屬性節(jié)點(diǎn)的方法。
childNodes屬性
childNodes 屬性可以用來獲取任何一個(gè)元素的所有子元素，它是一個(gè)包含這個(gè)元素全部子元素的數(shù)組，同樣，它支持length方法：
element.childNodes
nodeType屬性
每一個(gè)節(jié)點(diǎn)都有 nodeType 屬性。這個(gè)屬性可以讓我們知道自己正在與哪一種節(jié)點(diǎn)打交道。
node.nodeType
差勁的是 nodeType 的值并不是文字，而是數(shù)字。
nodeType 屬性總共有12種可取值，但其中僅有3種具有使用價(jià)值：
- 元素節(jié)點(diǎn) 的 nodeType 屬性值是1。
- 屬性節(jié)點(diǎn) 的 nodeType 屬性值是2。
- 文本節(jié)點(diǎn) 的 nodeType 屬性值是3。
nodeValue 屬性
如果想改變一個(gè)文本節(jié)點(diǎn)的值，那就是用 DOM 提供的 nodeValue 屬性，它用來得到（和設(shè)置）一個(gè)節(jié)點(diǎn)的值：
node.nodeValue
firstChild 和 lastChild 屬性
node.firstChild
這種寫法完全等價(jià)于：
node.childNodes[0]
而相對(duì)應(yīng)的
node.lastChild
等價(jià)于：
node.childNodes[node.childNodes.length - 1]
最后
上面記錄了基本的 DOM 的查和改的方法，以及一些 DOM 節(jié)點(diǎn)的屬性，下一篇文章會(huì)記錄 DOM 的 增 和 刪。
