javascript中对Attr(dom中属性)的操作示例讲解

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>20120430dom操作属性节点.htm</title>

　　//Attr(属性)虽然是节点但是不能用firstChild和childNodes等访问

　　function testBtn() {

　　// var myNode = document.getElementById("btn");//得到element标签

　　// var myNodeName = myNode.nodeName;//得到上述标签的名字为按钮

　　// var x = myNode.attributes["onclick"].nodeType;//atrributes为一个属性数组本句话的意思是找到标签为'btn'的nodeType=2为属性

　　// if (x == 2) {

　　// alert("您访问到的是一个属性节点！");

　　// }

　　//下面是对某节点属性的修改代码================================================================

　　//============================================================================================

　　var myNode = document.getElementById("btn");//得到element标签

　　var x = myNode.getAttribute("id");//获取该标签的id属性

　　myNode.setAttribute("value", "test");//修改标签的id属性

　　var y = myNode.getAttribute("value");

　　alert("id的属性由“" + x + "”变成了“" + y + "”");

　　//下面是为某元素添加属性=====================================================================

　　//============================================================================================

　　var myAtrr = document.createAttribute("class");

　　myAtrr.nodeValue = "classStyle";

　　myNode.setAttribute(myAtrr);

　　//getAttributeNode 和getAttribute的区别是获取属性值 - getAttribute()

　　//getAttribute("") 方法返回属性的值。

　　//获取属性值 - getAttributeNode()

　　//getAttributeNode("") 方法返回属性节点，getAttributeNode('').value取得节点值。

　　//对不同的浏览器结果不一样在这里不做深入研究================================================

　　if (myNode.getAttributeNode("class") != null)

　　alert("添加成功！！");

　　else

　　alert("没有添加成功");

　　//下面为移除属性的值==========================================================================

　　//===========================================================================================

　　// myNode.removeAttribute("class");

　　// if (myNode.getAttribute("class") == null)

　　// alert("删除成功！！");

　　// else

　　// alert("没有成功");

　　var delNode=myNode.getAttributeNode("class");

　　if (myNode.getAttribute("class") == null)

　　alert("删除成功！！");

　　else

　　alert("没有成功");

　　}

　　</script>

　　</head>

　　<body>

　　<h1>第二章关于dom</h1>

　　<p id="p1">dom简介</p>

　　</body>

　　</html>

　　注意区分后面有Node和没有Node的参数方法的区别

教程首页更多教程