在很久之前讀過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 的 增 和 刪。