DOM文档树形结构的主体部分是由Element节点构成的,但其中特殊的DOM2 HTML对象还会进一步扩展Element对象。所有Element对象都拥有Node对象的属性和方法,同时还有其它的一些便于操纵节点属性和查找子Element对象的方法。
操纵Element对象的属性
为了简化对attributes的处理,Element对象中包含了很多用来操纵Node对象的attributes属性的方法:
□ getAttribute(name)方法用来取得相应属性的值,例如:
ADS.addEvent(window,'load',function() { ADS.log.header('Get Safari href attribute'); var safariAnchor = document.getElementById('safari'); var href = safariAnchor.getAttribute('href'); ADS.log.write(href); });
□ removeAttribute(name)方法用来设置相应属性的值,例如:
ADS.addEvent(window,'load',function() { ADS.log.header('Set Safari title attribute'); var safariAnchor = document.getElementById('safari'); safariAnchor.setAttribute('title','Safari is for Mac OS X'); });
□ setAttribute(name,value)方法用来删除相应属性的值,例如:
ADS.addEvent(window,'load',function() { ADS.log.header('Remove Firefox title attribute'); var firefox = document.getElementById('firefoxListItem'); firefox.removeAttribute('title'); });
类似地,还有一些使用DOM Attr节点对象来操纵属性的方法:
□ getAttributeNode(name)方法取得指定属性的Attr节点
□ setAttributeNode(newAttr)方法使用Attr对象的实例来设置属性
□ removeAttributeNode(oldAttr)方法用来删除指定的属性节点
在Element对象中查找Element对象
在Element对象的范围内,可以用来查找其它节点的唯一有效方法是getElementsByTagName()。getElementsByTagName()方法返回的是一个NodeList对象,其中包括相应标签名称的引用。在最终的NodeList对象列表中,所有元素都是按照它们在DOM文档中出现的的先后顺序排列的。在getElementsByTagName()方法中,也可以使用星号(*)作为通配符来匹配所有元素的标签名称。例如:
ADS.addEvent(window,'load',function() { ADS.log.header('Get all browserList elements by tag name'); var list = document.getElementById('browserList'); var ancestors = list.getElementsByTagName('*'); for(i = 0 ; i < ancestors.length ; i++ ) { ADS.log.write(ancestors.item(i).nodeName); } });
输出的结果与它们在文档中出现的顺序一致:
□ LI
□ A
□ LI
□ A
□ LI
□ A
□ LI
□ A
getElementsByTagName()方法返回的节点中只包含Element节点,不包括其它类型的节点。