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+。