title: 《DOM編程藝術(shù)》一萍倡、DOM
date: 2017-04-13 22:27:25
tags: DOM編程藝術(shù)
1身弊、DOM的含義
文檔(D)，指的是document列敲，當(dāng)創(chuàng)建了一個(gè)網(wǎng)頁(yè)并把它加載到web瀏覽器中時(shí)阱佛，DOM就在幕后悄然而生，DOM把我們編寫的網(wǎng)頁(yè)文檔轉(zhuǎn)換為一個(gè)文檔對(duì)象戴而。
對(duì)象(O)凑术，指的就是javascript中的三種對(duì)象，用戶定義對(duì)象所意、內(nèi)建對(duì)象淮逊、宿主對(duì)象。
模型(M)扶踊，可以理解為模型Model或者地圖Map壮莹，我們可以通過javascript代碼來(lái)讀取這張地圖。
要理解模型或者地圖的概念姻檀，首先我們要理解DOM是把一份文檔表示為一棵樹命满。以下面文檔為例。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
<p title = "a gentle reminder">Don't forget to buy this stuff</p>
<ul id = "purchases">
<li>A tin of beans</li>
<li class = "sale">Cheese</li>
<li class = "sale">Milk</li>
</ul>
</body>
</html>
上面的一長(zhǎng)串代碼可以理解為以下的DOM樹
從上圖可以看出绣版，html永遠(yuǎn)是一個(gè)文檔的開始胶台，可以看作是樹根，再深一層就是head和body杂抽，它們位于一層诈唬，所以是兄弟關(guān)系(sibling)，它們都有各自的子元素(child)缩麸，有著共同的父元素(parent)铸磅。
實(shí)際上用parent、silbling杭朱、child就可以代表整個(gè)DOM樹的結(jié)構(gòu)阅仔，比如ul是ul是body的child元素，而ul又是li的parent元素弧械，ul和p是sibling元素八酒，并且這棵樹上的每個(gè)元素都是一個(gè)DOM節(jié)點(diǎn)。
2刃唐、節(jié)點(diǎn)
上面介紹了DOM的概念羞迷，由圖也可以看出界轩，DOM樹是由一個(gè)個(gè)節(jié)點(diǎn)組成的，這些就是DOM節(jié)點(diǎn)衔瓮。分為三種類型浊猾。
元素節(jié)點(diǎn)
標(biāo)簽的名字就是元素節(jié)點(diǎn)，例如"p"热鞍、"ul"葫慎、"body"等等。文本節(jié)點(diǎn)
被元素包括的文本內(nèi)容就是文本節(jié)點(diǎn)碍现，比如上面文檔中被<li>包含的"A tin of beans"幅疼。屬性節(jié)點(diǎn)
屬性節(jié)點(diǎn)用來(lái)對(duì)元素做出更具體的描述米奸，比如<p>的title屬性昼接，也包括id和class屬性，屬性節(jié)點(diǎn)也總是被包含在元素節(jié)點(diǎn)內(nèi)部悴晰。
那么我們?nèi)绾螀^(qū)分這三種節(jié)點(diǎn)呢慢睡？可以使用nodeType屬性。
nodeType屬性總共有12種可取值铡溪，但其中僅有3種有實(shí)用價(jià)值漂辐。
元素節(jié)點(diǎn)的nodeType屬性值是1
屬性節(jié)點(diǎn)的nodeType屬性值是2
文本節(jié)點(diǎn)的nodeType屬性值是3
實(shí)際使用中可以通過元素對(duì)象的nodeType屬性值來(lái)判斷節(jié)點(diǎn)類型。
3棕硫、獲取元素
有3種DOM方法可以獲取元素節(jié)點(diǎn)髓涯，分別是通過元素id、通過標(biāo)簽名哈扮、通過class獲取纬纪。
通過id名獲取
這個(gè)方法將返回一個(gè)與給定id屬性值的元素節(jié)點(diǎn)對(duì)應(yīng)的元素對(duì)象，它是document對(duì)象特有函數(shù)滑肉。
document.getElementById('box');
獲取id屬性值是'box'的元素對(duì)象包各。
這里一直再說元素對(duì)象這個(gè)概念，其實(shí)就是指的html元素靶庙，但是在DOM里html元素都是DOM節(jié)點(diǎn)问畅。而DOM節(jié)點(diǎn)本身就是一個(gè)對(duì)象，所以叫做元素對(duì)象六荒。
另外函數(shù)和方法其實(shí)也是一個(gè)概念护姆，對(duì)象的方法其實(shí)就是一個(gè)函數(shù)。
通過標(biāo)簽名獲取
這個(gè)方法返回一個(gè)對(duì)象數(shù)組掏击，與getElementById不同的是签则，這個(gè)返回的是一個(gè)數(shù)組，返回的數(shù)組中铐料，每個(gè)元素都是獲取到的元素對(duì)象渐裂，可以用length屬性查出這個(gè)數(shù)組的長(zhǎng)度豺旬。
document.getElementsByTagName('li');
這個(gè)方法允許把一個(gè)通配符作為它的參數(shù)，可以獲取文檔里的所有元素柒凉，也可以和getElementById結(jié)合使用
var box = document.getElementById('box');
var lis = box.getElementsByTagName('*');
這樣可以獲取id為box的元素下的所有元素對(duì)象族阅。
通過class獲取
這是HTML5中新增的方法，可以通過class名獲取元素膝捞，返回的也是一個(gè)對(duì)象數(shù)組坦刀。
document.getElementsByClassName('sale important');
獲取class屬性為sale和important的元素對(duì)象，這個(gè)元素必須同時(shí)有這兩個(gè)class名蔬咬，順序無(wú)所謂鲤遥。也可以和getElementById結(jié)合使用。
var box = document.getElementById('box');
var sales = box.getElementsByClassName('sale');
獲取id值為box的元素下的所有class名為sale的元素林艘。
需要注意的是這個(gè)方法比較新盖奈，所以用的時(shí)候要小心，為了彌補(bǔ)這個(gè)不足狐援，我們可以自己封裝一個(gè)獲取class名的方法以適用于舊版瀏覽器钢坦。
獲取class名的兼容性處理
function getElementsByClassName(node, className) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(className);
} else {
var results = new Array();
var elems = node.getElementsByClassName('*');
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ù)，node表示搜索起點(diǎn)啥酱，className是要搜索的class名爹凹，這個(gè)方法不足的地方是不適用多個(gè)class名。
4镶殷、獲取和設(shè)置屬性
已經(jīng)了解了三種獲取元素節(jié)點(diǎn)的方法禾酱，現(xiàn)在可以去獲取它們的屬性。
獲取屬性
var paras = document.getElementsByTagName('p');
for(var i = 0;i < paras.length;i++){
var title_text = paras[i].getAttribute('title');
if(title_text != null){
alert(title_text);
}
}
getAttribute用于獲取屬性绘趋，需要用元素節(jié)點(diǎn)去調(diào)用颤陶，參數(shù)是要獲取的屬性名，如果調(diào)用的元素節(jié)點(diǎn)里沒有要查找的屬性就會(huì)返回null埋心。
設(shè)置屬性
var paras = document.getElementsByTagName('p');
for(var i = 0;i < paras.length;i++){
paras[i].setAttribute('title','brand new title text');
alert(paras[i].getAttribute('title'));
}
setAttribute用于設(shè)置屬性指郁，不管調(diào)用的元素原來(lái)有沒有設(shè)置的屬性，最終都會(huì)被設(shè)置上拷呆，用setAttribute對(duì)文檔做出修改后闲坎，在瀏覽器中查看源代碼仍是改變前的屬性，這就是DOM的工作模式茬斧，對(duì)頁(yè)面內(nèi)容更新卻不需要在瀏覽器里刷新腰懂。
