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+。
点击加载更多评论>>