JavaScript DOM学习笔记3——DOM属性操作

最新推荐文章于 2022-06-07 20:07:02 发布

wawlian

最新推荐文章于 2022-06-07 20:07:02 发布

阅读量627

点赞数

分类专栏： JavaScript 文章标签： javascript attributes firefox chrome 编程测试

本文链接：https://blog.csdn.net/wawlian/article/details/6973172

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Node接口本身有一个attributes属性，并且所有类型的节点都继承了该属性。但是，事实上只有Element类型的节点才能有属性。Element节点的attibutes属性类型为NamedNodeList。NamedNodeMap可以通过数字和名字索引节点。

NamedNodeMap具有以下几个常用的方法：

1.getNamedItem(name):根据name获取属性节点。

2.setNamedItem(node):将节点添加进NamedNodeMap中，并且按照name索引。

3.removeNamedItem(name):删除name对应的节点

4.item(pos):类似于NodeList中的item()方法，通过节点的索引位置查找节点。

上述方法返回的都是一个Attr类型的节点，也就是Node.ATTRIBUTE_NODE。NamedNodeMap具有一个length属性表示其中包含几个元素。

但是考虑到上述方法过于累赘，DOM还定义了三个方法来操作属性：

getAttribute(name):通过name获取属性值

setAttribute(name,newValue):设置属性值

removeAttribute(name):删除属性

根据上面说的，我写了点测试代码：

 
 <html> 
    <head> 
        <title></title> 
        <script type="text/javascript"> 
                        function test() { 
                var oHtml = document.documentElement;  
                var oBody = oHtml.lastChild; 
                var oP = oBody.lastChild; 
                var oId = oP.getAttribute("id"); 
                alert(oId); 
            } 
             
        </script> 
    </head> 
    <body onload="test()"> 
        <p style="color:red" id="pId"></p> 
    </body> 
</html>

事实上，不管IE8、Chrome还是Firefox都没办法取到<p>的id属性值。这一点很是困惑。。。

参考书目：

《JavaScript高级编程》Nicolas C. Zakas著，曹力张欣等译。

wawlian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM学习笔记3——DOM属性操作

Node接口本身有一个attributes属性，并且所有类型的节点都继承了该属性。但是，事实上只有Element类型的节点才能有属性。Element节点的attibutes属性类型为NamedNodeList。NamedNodeMap可以通过数字和名字索引节点。NamedNodeMap具有以下几个常用的方法：1.getNamedItem(name):根据name获取属性节点。
复制链接

扫一扫

专栏目录