JavaScript 访问元素

■知识点

在文档中访问元素的方法有很多，常用的方法如下。

    使用getElementByldO方法可以准确获取文档中指定元素。用法如下：

    document.getElementByld(ID)

其中，参数ID表示文档中对应元素的id属性值。如果文档中不存在指定元素，则返回值为null。该方法只适用于document对象。

    使用getElementByTagName()方法可以获取指定标签名称的所有元素。用法如下：

    document.getElementsByTagName(tagNarae);

其中，参数tagName表示指定名称的标签，该方法返回值为一个节点集合，使用length属性可以获取集合中包含元素的个数，利用下标可以访问其中某个元素对象。

■实例设计

【示例1】在下面的示例中，使用getElementByld()方法获取<div id="box">对象，然后使用nodeName、nodeType、parentNode和childNodes属性查看该对象的节点类型、节点名称、父节点和第1个子节点的名称。

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

<script〉

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

var info = "nodeName：" + box.nodeName;         //获取该节点的名称

info += "\rnddeType: " + box.nodeType;         //获取该节点的类型/

info += "\rparentNode: " + box.parentNode.nodeNarae; //获取该节点的父节点名称

info += "\rchildNodes：" + box.childNodes[0].hodeName;  //获取该节点的子节点名称 

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

〈/script〉

【示例2】下面的代码使用for循环获取每个p元素，并设置p元素的class属性为“red”。

var p = document.getElementsByTagName("p");    //获取 p 元素的所有引用

for (var i=0; i<p.length;i++) {                    //遍历 p 数据集合

    p[i] .setAttribute("class", "red") ;    //为每个p元素定义red类样式

}

■小结

    使用 parentNode、nextSibling、previousSibling、firstChild 和 lastChild 属性可以遍历文档树中任意类型节点，包括空字符（文本节点）。HTML5新添加了5个属性专门访问元素节点。

    childElementCount: 返回子元素的个数，不包括文本节点和注释。 

    firscElementChild: 返回第 1 个子元素。 

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

    previousElementSibling：返回前一个相邻兄弟元素。 

    nextElementSibling: 返回后一个相邻兄弟元素。

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