JavaScript 訪問元素
■知識(shí)點(diǎn)
在文檔中訪問元素的方法有很多,常用的方法如下。
使用getElementByldO方法可以準(zhǔn)確獲取文檔中指定元素。用法如下:
document.getElementByld(ID)
其中,參數(shù)ID表示文檔中對(duì)應(yīng)元素的id屬性值。如果文檔中不存在指定元素,則返回值為null。該方法只適用于document對(duì)象。
使用getElementByTagName()方法可以獲取指定標(biāo)簽名稱的所有元素。用法如下:
document.getElementsByTagName(tagNarae);
其中,參數(shù)tagName表示指定名稱的標(biāo)簽,該方法返回值為一個(gè)節(jié)點(diǎn)集合,使用length屬性可以獲取集合中包含元素的個(gè)數(shù),利用下標(biāo)可以訪問其中某個(gè)元素對(duì)象。
■實(shí)例設(shè)計(jì)
【示例1】在下面的示例中,使用getElementByld()方法獲取<div id="box">對(duì)象,然后使用nodeName、nodeType、parentNode和childNodes屬性查看該對(duì)象的節(jié)點(diǎn)類型、節(jié)點(diǎn)名稱、父節(jié)點(diǎn)和第1個(gè)子節(jié)點(diǎn)的名稱。
<div id="box">盒子</div>
<script〉
var box = document.getElementByld("box"); //獲取指定盒子的引用
var info = "nodeName:" + box.nodeName; //獲取該節(jié)點(diǎn)的名稱
info += "\rnddeType: " + box.nodeType; //獲取該節(jié)點(diǎn)的類型/
info += "\rparentNode: " + box.parentNode.nodeNarae; //獲取該節(jié)點(diǎn)的父節(jié)點(diǎn)名稱
info += "\rchildNodes:" + box.childNodes[0].hodeName; //獲取該節(jié)點(diǎn)的子節(jié)點(diǎn)名稱
console.log (info); //顯示提示信息
〈/script〉
【示例2】下面的代碼使用for循環(huán)獲取每個(gè)p元素,并設(shè)置p元素的class屬性為“red”。
var p = document.getElementsByTagName("p"); //獲取 p 元素的所有引用
for (var i=0; i<p.length;i++) { //遍歷 p 數(shù)據(jù)集合
p[i] .setAttribute("class", "red") ; //為每個(gè)p元素定義red類樣式
}
■小結(jié)
使用 parentNode、nextSibling、previousSibling、firstChild 和 lastChild 屬性可以遍歷文檔樹中任意類型節(jié)點(diǎn),包括空字符(文本節(jié)點(diǎn))。HTML5新添加了5個(gè)屬性專門訪問元素節(jié)點(diǎn)。
childElementCount: 返回子元素的個(gè)數(shù),不包括文本節(jié)點(diǎn)和注釋。
firscElementChild: 返回第 1 個(gè)子元素。
lastElementChild: 返回最后一個(gè)子元素。
previousElementSibling:返回前一個(gè)相鄰兄弟元素。
nextElementSibling: 返回后一個(gè)相鄰兄弟元素。
瀏覽器支持:IE9+、Firefox 3.5+> Safari 4+、Chrome 和Opera10+。
點(diǎn)擊加載更多評(píng)論>>