JavaScript操作DOM對象詳解
一、DOM基礎
DOM（Document Object Model）即文檔對象模型，針對HTML和XML文檔的API（應用程序接口）。DOM描繪了一個層次化的節(jié)點樹，運行開發(fā)人員添加、移除和修改頁面的某一部分。DOM中的三個字母，D（文檔）可以理解為整個Web加載的網(wǎng)頁文檔；O（對象）可以理解為類似Window對象之類的東西，可以調用屬性和方法，這里我們說的是document對象；M（模型）可以理解為網(wǎng)頁文檔的樹型結構。
1、節(jié)點
加載HTML頁面時，Web瀏覽器生成一個樹型結構，用來表示頁面內(nèi)部結構。DOM將這種樹型結構理解為由節(jié)點組成。
從上圖的樹型結構，我們理解幾個概念，html標簽沒有父輩，沒有兄弟，所以html標簽為根標簽。head標簽是html標簽的子標簽，meta和title標簽之間是兄弟關系。如果把每個標簽當做一個節(jié)點的話，那么這些節(jié)點組合成了一棵節(jié)點樹。
注：后面我們經(jīng)常把標簽稱作為元素，是一個意思。
2、節(jié)點種類
示例：
<div title="屬性節(jié)點">測試Div</div>
節(jié)點分為三類：
- 1、元素節(jié)點：其實就是標簽，即：<div></div>
- 2、文本節(jié)點：其實就是標簽內(nèi)的純文本，即：測試Div
- 3、屬性節(jié)點：其實就是標簽的屬性，即：title=“屬性節(jié)點”
二、查找元素
W3C提供了比較方便簡單的定位節(jié)點的方法和屬性，以便我們快速的對節(jié)點進行操作，分別為getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。
元素節(jié)點方法
| 方法 | 說明 |
| getElementById() | 獲取特點ID元素的節(jié)點 |
| getElementsByTagName() | 獲取相同元素的節(jié)點列表 |
| getElementsByName() | 獲取相同名稱的節(jié)點列表 |
| getAttribute() | 獲取特點元素節(jié)點屬性的值 |
| setAttribute() | 設置特點元素節(jié)點屬性的值 |
| removeAttribute() | 移除特定元素節(jié)點屬性 |
1、getElementById()
getElementById()方法，接受一個參數(shù)：要獲取的元素的ID。如果找到相應的元素則返回該元素的HTMLDivElement對象，如果不存在，則返回null。
示例：
???? var box=document.getElementById('box');?????????? //獲取id為box的元素節(jié)點
???? alert(box);上面的例子，默認情況返回null，這無關是否存在id='box'的標簽，而是執(zhí)行順序問題。
注：DOM操作必須等待HTML文檔全部加載完畢以后，才可以獲取元素。
解決方法：
1、把script調用標簽移到html末尾即可；
2、使用onload事件來處理JS，等待html加載完畢再加載onload事件里面的JS。
?? window.onload=function(){
??????? //這里存放當網(wǎng)頁所有內(nèi)容都加載完畢后，再執(zhí)行的代碼
??? };上面的代碼可以改為：
window.onload=function(){
var box=document.getElementById('box'); //預加載html后執(zhí)行
alert(box);
};注：id表示一個元素節(jié)點的唯一性，不能同時給兩個或以上的元素節(jié)點創(chuàng)建同一個命名的id。某些低版本的瀏覽器會無法識別getElementById()方法，這時需要做一些判斷：
?? if(document.getElementById){???? //判斷是否支持getElementById
??????? alert('但前瀏覽器支持getElementById');
??? }上面例子中的代碼最終修改為：
?window.onload=function(){
???? if(document.getElementById){
?????????????? var box=document.getElementById('box');
????????????? ?alert(box);
????? }else{
?????????????? alert('瀏覽器不兼容，請更換瀏覽器');
??????}
};當我們通過getElementById()獲取到特定元素節(jié)點時，這個節(jié)點對象就被我們獲取到了，而通過這個節(jié)點對象，我們可以訪問它的一系列屬性。
元素節(jié)點屬性
| 屬性 | 說明 |
| tagName | 獲取元素節(jié)點的標簽名 |
| innerHTML | 獲取元素節(jié)點里的內(nèi)容(即純文本)，非W3C DOM規(guī)范 |
示例：
document.getElementById('box').tagName; //獲取這個元素節(jié)點的標簽名 輸出DIV
document.getElementById('box').innerHTML; //獲取這個元素節(jié)點里面的文本（包含HTML標簽）HTML屬性的屬性
| 屬性 | 說明 |
| id | 元素節(jié)點的id名稱 |
| title | 元素節(jié)點的title屬性值 |
| style | CSS內(nèi)聯(lián)樣式屬性值 |
| className | CSS元素的類 |
示例：
window.onload=function(){
??? var box=document.getElementById('box');
????alert(box.id);?????????????????? //獲取這個元素節(jié)點id屬性的值，注意；不是屬性節(jié)點
??? alert(box.title);??????????????? //獲取title屬性的值
??? alert(box.style);????????????? //獲取style屬性對象
??? alert(box.style.color);???? //獲取style屬性對象中的color屬性的值
??? alert(box.className);?? //獲取class屬性的值???
};注：直接調用的屬性也可以賦值
示例：
var box=document.getElementById('box');
box.id="KKK";
box.innerHTML="玩轉<strong>JS</strong>"; //賦值，可以解析HTML，不是單獨的文本（包含HTML標簽）。2、getElementsByTagName()方法
getElementsByTagName()方法將返回一個對象數(shù)組HTMLCollection(NodeList)，這個數(shù)組保存著所有相同元素名的節(jié)點列表。該方法需要一個參數(shù)：HTML標簽的名稱。
document.getElementsByTagName('*');????????????? //獲取所有元素注：IE瀏覽器在使用通配符的時候，會把文檔最開始的HTML的規(guī)范聲明當作第一個元素。
示例：
window.onload=function(){
???? var li=document.getElementsByTagName('li');??? //參數(shù)傳遞一個標簽名即可
???? alert(li);???????????????????????????? //返回一個數(shù)組集合，HTMLCollection
???? alert(li.length);????????????????? //返回數(shù)組的個數(shù)
???? alert(li[0]);??????????????????????? //HTMLliElement，返回數(shù)組的第一個
???? alert(li.item(0));??????????????? //返回數(shù)組的第一個
???? alert(li[0].tagName);??????? //輸出第一個LI標簽
???? alert(li[0].innerHTML);??? //輸出第一個<li>標簽的文本：即1
};示例獲取body節(jié)點：
window.onload=function(){
?? //獲取body節(jié)點對象
?? var body=document.getElementsByName('body')[0];
?? alert(body);??????????? //返回HTMLBodyElement對象，body節(jié)點
};注：不管是getElementById還是getElementsByTagName，在傳遞參數(shù)的時候，并不是所有瀏覽器都必須區(qū)分大小寫，為了防止不必要的錯誤和麻煩，我們必須堅持養(yǎng)成區(qū)分大小寫的習慣。
3、getElementsByName()方法
getElementsByName()方法可以獲取相同名稱（name）的元素，返回一個對象數(shù)組HTMLCollection(NodeList)。該方法需要一個參數(shù)：HTML標簽的name屬性的值。
示例：
<html xmlns="http://www.w3.org/1999/xhtml"> ?<head> ??<meta/> ??<title>DOM基礎</title>?? ?</head> ?<body> ??? <div? id="box" title="標題" class="pox" style="color:red">測試Div</div> ??? <input name="test" type="checkbox" value="測試" 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);????????????????????? //輸出：測試
????? alert(input.checked);???????????????? //輸出：true
};注：對于并不是HTML合法的屬性，那么在JS獲取的兼容性上也會存在差異，IE瀏覽器支持本身合法的name屬性，而不合法的就會出現(xiàn)不兼容的問題。
4、getAttribute()方法
getAttribute()方法將獲取元素中某個屬性的值。它和直接使用屬性獲取屬性值的方法有一定區(qū)別。
示例：
window.onload=function(){
?? var box=document.getElementById('box');
?? alert(box.bbb);??????????????????????????? //自定義，W3C不合法，只有IE瀏覽器支持
?? alert(box.getAttribute('style'));??? //非IE返回的是style字符串，IE返回的是對象，這里有個不兼容的問題
?? alert(box.getAttribute('bbb'));???? //自定義，所有瀏覽器都兼容
};注：HTML通用屬性style和onclick，IE7更低的版本style返回一個對象，onclick返回一個函數(shù)式。雖然IE8已經(jīng)修復了這個bug，但為了更好的兼容，開發(fā)人員只有盡可能避免使用getAttribute()訪問HTML屬性了，或者碰到特殊的屬性獲取做特殊的兼容處理。
5、setAttribute()方法
setAttribute()方法將設置元素中某個屬性和值。它需要接受兩個參數(shù)：屬性名和值。如果屬性本身已存在，那么就會被覆蓋。
示例：
window.onload=function(){
?? var box=document.getElementById('box');
?? box.setAttribute('title','標題');???????????????????? //創(chuàng)建一個屬性和屬性值
?? box.setAttribute('align','center');??????????????????? //設置居中
?? box.setAttribute('bbb','ccc');?????????????????????? //設置自定義的屬性和值
};注：在IE7及更低的版本中，使用setAttribute()方法設置class和style屬性是沒有效果的，雖然IE8解決了這個bug，但還是不建議使用。
6、removeAttribute()方法
removeAttribute()方法可以移除HTML屬性。
示例：
window.onload=function(){
?? var box=document.getElementById('box');
?? box.removeAttribute('style');??????? //移除屬性
};注：IE6及更低版本不支持removeAttribute()方法。
到此這篇關于JavaScript操作DOM對象詳解的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Document想必大家并不陌生吧，在使用js的過程中會經(jīng)常遇到它，那么它有哪些屬性、哪些方法，在本文將以示例為大家詳細介紹下，希望對大家有所幫助2013-09-09
這篇文章主要介紹了javascript三元運算符用法實例,本文講解了三元運算符用法實例和編程語言中的三元運算符介紹,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了向JavaScript的數(shù)組中添加元素的方法小結,分別舉了一些JS數(shù)組操作的例子,基本需要的朋友可以參考下2015-10-10
本教程為未接觸過 JavaScript 的讀者提供了比較完善的初級知識，但只限于初級知識2009-01-01
js正則匹配換行過程中會出現(xiàn)很多的問題，本文將提供詳細的解決方法，需要的朋友可以參考下2012-12-12
關于什么是javascript模塊化以及為何使用模塊化開發(fā)
這篇文章主要介紹了關于什么是javascript模塊化以及為何使用模塊化開發(fā),模塊化是一種軟件開發(fā)的設計模式，它將一個大型的軟件系統(tǒng)劃分成多個獨立的模塊，每個模塊都有自己的功能和接口,需要的朋友可以參考下2023-04-04
本文不是零基礎教學，請沒javascript基礎的小伙伴們先出門左拐，本人之前學習java的，所以本文主要對比下java學習javascript。2015-01-01
這篇文章主要為大家詳細介紹了javascript數(shù)組的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章是Javascript數(shù)組Array系列文章的第二篇，主要給大家講解的是javascript數(shù)組arrayd的所有方法，希望大家能夠喜歡。2016-03-03
JavaScript初級教程(第三課)...2007-04-04