欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript操作DOM對象詳解

 更新時(shí)間：2022年02月26日 09:28:17   作者：.NET開發(fā)菜鳥  
本文詳細(xì)講解了JavaScript操作DOM對象的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、DOM基礎(chǔ)

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

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

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

從上圖的樹型結(jié)構(gòu)，我們理解幾個(gè)概念，html標(biāo)簽沒有父輩，沒有兄弟，所以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)樹。
注：后面我們經(jīng)常把標(biāo)簽稱作為元素，是一個(gè)意思。

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

示例：

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

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

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

二、查找元素

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

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

 方法 說明
 getElementById() 獲取特點(diǎn)ID元素的節(jié)點(diǎn)
 getElementsByTagName() 獲取相同元素的節(jié)點(diǎn)列表
 getElementsByName() 獲取相同名稱的節(jié)點(diǎn)列表
 getAttribute() 獲取特點(diǎn)元素節(jié)點(diǎn)屬性的值
 setAttribute() 設(shè)置特點(diǎn)元素節(jié)點(diǎn)屬性的值
 removeAttribute() 移除特定元素節(jié)點(diǎn)屬性

1、getElementById()

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

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

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

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

解決方法：

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

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

?? window.onload=function(){
??????? //這里存放當(dāng)網(wǎng)頁所有內(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。某些低版本的瀏覽器會無法識別getElementById()方法，這時(shí)需要做一些判斷：

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

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

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

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

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

屬性說明
tagName獲取元素節(jié)點(diǎn)的標(biāo)簽名
innerHTML獲取元素節(jié)點(diǎn)里的內(nèi)容(即純文本)，非W3C DOM規(guī)范

示例：

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

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

HTML屬性的屬性

屬性說明
id元素節(jié)點(diǎn)的id名稱
title元素節(jié)點(diǎn)的title屬性值
styleCSS內(nèi)聯(lián)樣式屬性值
classNameCSS元素的類

示例：

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屬性對象
??? alert(box.style.color);???? //獲取style屬性對象中的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è)對象數(shù)組HTMLCollection(NodeList)，這個(gè)數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表。該方法需要一個(gè)參數(shù)：HTML標(biāo)簽的名稱。

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

注：IE瀏覽器在使用通配符的時(shí)候，會把文檔最開始的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)對象
?? var body=document.getElementsByName('body')[0];
?? alert(body);??????????? //返回HTMLBodyElement對象，body節(jié)點(diǎn)
};

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

3、getElementsByName()方法

getElementsByName()方法可以獲取相同名稱（name）的元素，返回一個(gè)對象數(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">測試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()方法將獲取元素中某個(gè)屬性的值。它和直接使用屬性獲取屬性值的方法有一定區(qū)別。

示例：

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

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

5、setAttribute()方法

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

示例：

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屬性是沒有效果的，雖然IE8解決了這個(gè)bug，但還是不建議使用。

6、removeAttribute()方法

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

示例：

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

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

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

相關(guān)文章

最新評論