ADS3.9 DOM2核心和DOM2 HTML——Element对象

前端技术 everyinch 3202℃ 0评论

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节点,不包括其它类型的节点。

分享&收藏

转载请注明:陈童的博客 » ADS3.9 DOM2核心和DOM2 HTML——Element对象

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>