javascript中的对Attr(dom中属性)操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>20120430dom操作属性节点.htm</title> <meta http-equiv="Content-Type" content="text/html; chareset=utf-8"/> <script type="text/javascript"> //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> <p>如何使用<a href="#" name="link">dom</a></p> <input id="btn" type="button" onclick="testBtn()" value="测试"/> </body> </html>
注意区分后面有Node和没有Node的参数方法的区别