JavaScript 訪問元素

■知識點

在文檔中訪問元素的方法有很多，常用的方法如下。

    使用getElementByldO方法可以準確獲取文檔中指定元素。用法如下：

    document.getElementByld(ID)

其中，參數(shù)ID表示文檔中對應元素的id屬性值。如果文檔中不存在指定元素，則返回值為null。該方法只適用于document對象。

    使用getElementByTagName()方法可以獲取指定標簽名稱的所有元素。用法如下：

    document.getElementsByTagName(tagNarae);

其中，參數(shù)tagName表示指定名稱的標簽，該方法返回值為一個節(jié)點集合，使用length屬性可以獲取集合中包含元素的個數(shù)，利用下標可以訪問其中某個元素對象。

■實例設計

【示例1】在下面的示例中，使用getElementByld()方法獲取<div id="box">對象，然后使用nodeName、nodeType、parentNode和childNodes屬性查看該對象的節(jié)點類型、節(jié)點名稱、父節(jié)點和第1個子節(jié)點的名稱。

<div id="box">盒子</div>

<script〉

var box = document.getElementByld("box"); //獲取指定盒子的引用

var info = "nodeName：" + box.nodeName;         //獲取該節(jié)點的名稱

info += "\rnddeType: " + box.nodeType;         //獲取該節(jié)點的類型/

info += "\rparentNode: " + box.parentNode.nodeNarae; //獲取該節(jié)點的父節(jié)點名稱

info += "\rchildNodes：" + box.childNodes[0].hodeName;  //獲取該節(jié)點的子節(jié)點名稱 

console.log (info);                                 //顯示提示信息

〈/script〉

【示例2】下面的代碼使用for循環(huán)獲取每個p元素，并設置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") ;    //為每個p元素定義red類樣式

}

■小結

    使用 parentNode、nextSibling、previousSibling、firstChild 和 lastChild 屬性可以遍歷文檔樹中任意類型節(jié)點，包括空字符（文本節(jié)點）。HTML5新添加了5個屬性專門訪問元素節(jié)點。

    childElementCount: 返回子元素的個數(shù)，不包括文本節(jié)點和注釋。 

    firscElementChild: 返回第 1 個子元素。 

    lastElementChild: 返回最后一個子元素。 

    previousElementSibling：返回前一個相鄰兄弟元素。 

    nextElementSibling: 返回后一個相鄰兄弟元素。

瀏覽器支持：IE9+、Firefox 3.5+> Safari 4+、Chrome 和Opera10+。