JavaScript DOM学习笔记3——DOM属性操作
2011-11-15 15:11
881 查看
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):删除属性
根据上面说的,我写了点测试代码:
事实上,不管IE8、Chrome还是Firefox都没办法取到<p>的id属性值。这一点很是困惑。。。
参考书目:
《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。
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著, 曹力 张欣 等译。
相关文章推荐
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
- 学习笔记(二):javascript之dom操作
- 【知了堂学习笔记】_JavaScript之DOM操作(英语在线翻译)
- javascript学习笔记3:DOM操作之选取文档元素
- javascript学习笔记—DOM常用API、属性、方法、函数
- JavaScript DOM学习笔记之标签属性
- JavaScript DOM学习笔记5――创建和操作节点
- javascript 学习笔记(一)DOM基本操作
- JavaScript Dom 编程艺术学习笔记之DOM操作
- JavaScript学习笔记之通过DOM操作CSS
- JavaScript Dom 编程艺术学习笔记之DOM操作
- JavaScript DOM编程 学习笔记-节点属性
- 【学习笔记】DOM中的节点操作函数以及属性
- 【知了堂学习笔记】_JavaScript之DOM操作案例(验证码)
- JavaScript 对象属性操作和方法学习笔记(上)
- learning jQuery 学习笔记九(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----操作属性
- javascript 学习笔记(一)DOM基本操作
- JavaScript学习笔记之通过DOM操作html
- JavaScript DOM学习笔记5——创建和操作节点
- JavaScript学习笔记 - 入门篇(3)- DOM操作