一、DOM基礎(chǔ)

DOM（Document Object Model）即文檔對(duì)象模型，針對(duì)HTML和XML文檔的API（應(yīng)用程序接口）。DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)，運(yùn)行開(kāi)發(fā)人員添加、移除和修改頁(yè)面的某一部分。DOM中的三個(gè)字母，D（文檔）可以理解為整個(gè)Web加載的網(wǎng)頁(yè)文檔；O（對(duì)象）可以理解為類(lèi)似Window對(duì)象之類(lèi)的東西，可以調(diào)用屬性和方法，這里我們說(shuō)的是document對(duì)象；M（模型）可以理解為網(wǎng)頁(yè)文檔的樹(shù)型結(jié)構(gòu)。

1、節(jié)點(diǎn)

加載HTML頁(yè)面時(shí)，Web瀏覽器生成一個(gè)樹(shù)型結(jié)構(gòu)，用來(lái)表示頁(yè)面內(nèi)部結(jié)構(gòu)。DOM將這種樹(shù)型結(jié)構(gòu)理解為由節(jié)點(diǎn)組成。

從上圖的樹(shù)型結(jié)構(gòu)，我們理解幾個(gè)概念，html標(biāo)簽沒(méi)有父輩，沒(méi)有兄弟，所以html標(biāo)簽為根標(biāo)簽。head標(biāo)簽是html標(biāo)簽的子標(biāo)簽，meta和title標(biāo)簽之間是兄弟關(guān)系。如果把每個(gè)標(biāo)簽當(dāng)做一個(gè)節(jié)點(diǎn)的話，那么這些節(jié)點(diǎn)組合成了一棵節(jié)點(diǎn)樹(shù)。
注：后面我們經(jīng)常把標(biāo)簽稱(chēng)作為元素，是一個(gè)意思。

2、節(jié)點(diǎn)種類(lèi)

示例：

<div title="屬性節(jié)點(diǎn)">測(cè)試Div</div>

節(jié)點(diǎn)分為三類(lèi)：

•  1、元素節(jié)點(diǎn)：其實(shí)就是標(biāo)簽，即：<div></div>
•  2、文本節(jié)點(diǎn)：其實(shí)就是標(biāo)簽內(nèi)的純文本，即：測(cè)試Div
•  3、屬性節(jié)點(diǎn)：其實(shí)就是標(biāo)簽的屬性，即：title=“屬性節(jié)點(diǎn)”

二、查找元素

W3C提供了比較方便簡(jiǎn)單的定位節(jié)點(diǎn)的方法和屬性，以便我們快速的對(duì)節(jié)點(diǎn)進(jìn)行操作，分別為getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

元素節(jié)點(diǎn)方法

1、getElementById()

getElementById()方法，接受一個(gè)參數(shù)：要獲取的元素的ID。如果找到相應(yīng)的元素則返回該元素的HTMLDivElement對(duì)象，如果不存在，則返回null。
示例：

???? var box=document.getElementById('box');?????????? //獲取id為box的元素節(jié)點(diǎn)
???? alert(box);

上面的例子，默認(rèn)情況返回null，這無(wú)關(guān)是否存在id='box'的標(biāo)簽，而是執(zhí)行順序問(wèn)題。

注：DOM操作必須等待HTML文檔全部加載完畢以后，才可以獲取元素。

解決方法：

1、把script調(diào)用標(biāo)簽移到html末尾即可；

2、使用onload事件來(lái)處理JS，等待html加載完畢再加載onload事件里面的JS。

?? window.onload=function(){
??????? //這里存放當(dāng)網(wǎng)頁(yè)所有內(nèi)容都加載完畢后，再執(zhí)行的代碼
??? };

上面的代碼可以改為：

   window.onload=function(){
        var box=document.getElementById('box');                //預(yù)加載html后執(zhí)行

        alert(box);
    };

注：id表示一個(gè)元素節(jié)點(diǎn)的唯一性，不能同時(shí)給兩個(gè)或以上的元素節(jié)點(diǎn)創(chuàng)建同一個(gè)命名的id。某些低版本的瀏覽器會(huì)無(wú)法識(shí)別getElementById()方法，這時(shí)需要做一些判斷：

?? if(document.getElementById){???? //判斷是否支持getElementById
??????? alert('但前瀏覽器支持getElementById');
??? }

上面例子中的代碼最終修改為：

?window.onload=function(){
???? if(document.getElementById){
?????????????? var box=document.getElementById('box');
????????????? ?alert(box);
????? }else{
?????????????? alert('瀏覽器不兼容，請(qǐng)更換瀏覽器');
??????}
};

當(dāng)我們通過(guò)getElementById()獲取到特定元素節(jié)點(diǎn)時(shí)，這個(gè)節(jié)點(diǎn)對(duì)象就被我們獲取到了，而通過(guò)這個(gè)節(jié)點(diǎn)對(duì)象，我們可以訪問(wèn)它的一系列屬性。

元素節(jié)點(diǎn)屬性

示例：

document.getElementById('box').tagName;         //獲取這個(gè)元素節(jié)點(diǎn)的標(biāo)簽名 輸出DIV

document.getElementById('box').innerHTML;       //獲取這個(gè)元素節(jié)點(diǎn)里面的文本（包含HTML標(biāo)簽）

HTML屬性的屬性

示例：

window.onload=function(){
??? var box=document.getElementById('box');
????alert(box.id);?????????????????? //獲取這個(gè)元素節(jié)點(diǎn)id屬性的值，注意；不是屬性節(jié)點(diǎn)
??? alert(box.title);??????????????? //獲取title屬性的值
??? alert(box.style);????????????? //獲取style屬性對(duì)象
??? alert(box.style.color);???? //獲取style屬性對(duì)象中的color屬性的值
??? alert(box.className);?? //獲取class屬性的值???
};

注：直接調(diào)用的屬性也可以賦值

示例：

var box=document.getElementById('box');

box.id="KKK";

box.innerHTML="玩轉(zhuǎn)<strong>JS</strong>";         //賦值，可以解析HTML，不是單獨(dú)的文本（包含HTML標(biāo)簽）。

2、getElementsByTagName()方法

getElementsByTagName()方法將返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)，這個(gè)數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表。該方法需要一個(gè)參數(shù)：HTML標(biāo)簽的名稱(chēng)。

document.getElementsByTagName('*');????????????? //獲取所有元素

注：IE瀏覽器在使用通配符的時(shí)候，會(huì)把文檔最開(kāi)始的HTML的規(guī)范聲明當(dāng)作第一個(gè)元素。

示例：

window.onload=function(){
???? var li=document.getElementsByTagName('li');??? //參數(shù)傳遞一個(gè)標(biāo)簽名即可
???? alert(li);???????????????????????????? //返回一個(gè)數(shù)組集合，HTMLCollection
???? alert(li.length);????????????????? //返回?cái)?shù)組的個(gè)數(shù)
???? alert(li[0]);??????????????????????? //HTMLliElement，返回?cái)?shù)組的第一個(gè)
???? alert(li.item(0));??????????????? //返回?cái)?shù)組的第一個(gè)
???? alert(li[0].tagName);??????? //輸出第一個(gè)LI標(biāo)簽
???? alert(li[0].innerHTML);??? //輸出第一個(gè)<li>標(biāo)簽的文本：即1
};

示例獲取body節(jié)點(diǎn)：

window.onload=function(){
?? //獲取body節(jié)點(diǎn)對(duì)象
?? var body=document.getElementsByName('body')[0];
?? alert(body);??????????? //返回HTMLBodyElement對(duì)象，body節(jié)點(diǎn)
};

注：不管是getElementById還是getElementsByTagName，在傳遞參數(shù)的時(shí)候，并不是所有瀏覽器都必須區(qū)分大小寫(xiě)，為了防止不必要的錯(cuò)誤和麻煩，我們必須堅(jiān)持養(yǎng)成區(qū)分大小寫(xiě)的習(xí)慣。

3、getElementsByName()方法

getElementsByName()方法可以獲取相同名稱(chēng)（name）的元素，返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)。該方法需要一個(gè)參數(shù)：HTML標(biāo)簽的name屬性的值。

示例：

<html xmlns="http://www.w3.org/1999/xhtml">
?<head>
??<meta/>
??<title>DOM基礎(chǔ)</title>??
?</head>
?<body>
??? <div? id="box" title="標(biāo)題" class="pox" style="color:red">測(cè)試Div</div>
??? <input name="test" type="checkbox" value="測(cè)試" checked="checked">
????????? <ul>
?????? <li>1</li>
??? <li>2</li>
??? <li>3</li>
??? </ul>
?</body>
?<script type="text/javascript" src="demo.js"></script>
</html>

JS代碼：

window.onload=function(){
????? var input=document.getElementsByName('test')[0];
????? alert(input.value);????????????????????? //輸出：測(cè)試
????? alert(input.checked);???????????????? //輸出：true
};

注：對(duì)于并不是HTML合法的屬性，那么在JS獲取的兼容性上也會(huì)存在差異，IE瀏覽器支持本身合法的name屬性，而不合法的就會(huì)出現(xiàn)不兼容的問(wèn)題。

4、getAttribute()方法

getAttribute()方法將獲取元素中某個(gè)屬性的值。它和直接使用屬性獲取屬性值的方法有一定區(qū)別。

示例：

window.onload=function(){
?? var box=document.getElementById('box');
?? alert(box.bbb);??????????????????????????? //自定義，W3C不合法，只有IE瀏覽器支持
?? alert(box.getAttribute('style'));??? //非IE返回的是style字符串，IE返回的是對(duì)象，這里有個(gè)不兼容的問(wèn)題
?? alert(box.getAttribute('bbb'));???? //自定義，所有瀏覽器都兼容
};

注：HTML通用屬性style和onclick，IE7更低的版本style返回一個(gè)對(duì)象，onclick返回一個(gè)函數(shù)式。雖然IE8已經(jīng)修復(fù)了這個(gè)bug，但為了更好的兼容，開(kāi)發(fā)人員只有盡可能避免使用getAttribute()訪問(wèn)HTML屬性了，或者碰到特殊的屬性獲取做特殊的兼容處理。

5、setAttribute()方法

setAttribute()方法將設(shè)置元素中某個(gè)屬性和值。它需要接受兩個(gè)參數(shù)：屬性名和值。如果屬性本身已存在，那么就會(huì)被覆蓋。

示例：

window.onload=function(){
?? var box=document.getElementById('box');
?? box.setAttribute('title','標(biāo)題');???????????????????? //創(chuàng)建一個(gè)屬性和屬性值
?? box.setAttribute('align','center');??????????????????? //設(shè)置居中
?? box.setAttribute('bbb','ccc');?????????????????????? //設(shè)置自定義的屬性和值
};

注：在IE7及更低的版本中，使用setAttribute()方法設(shè)置class和style屬性是沒(méi)有效果的，雖然IE8解決了這個(gè)bug，但還是不建議使用。

6、removeAttribute()方法

removeAttribute()方法可以移除HTML屬性。

示例：

window.onload=function(){
?? var box=document.getElementById('box');
?? box.removeAttribute('style');??????? //移除屬性
};

注：IE6及更低版本不支持removeAttribute()方法。

到此這篇關(guān)于JavaScript操作DOM對(duì)象詳解的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論