获取属性节点: 元素节点.getAttributeNode(属性名字符串) 可使用nodeType查看属性类型
修改: 使用nodeValue设置和获取属性值
创建属性节点(例): var atr=document.createAttribute(“class”);atr.nodeValue=“democlass”; 元素节点. setAttributeNode(atr) 注:其实这种方法就是操作html上的attribute
添加属性节点 setAttributeNode(myclass);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .myClass{ background-color: red; } body{ font-size: 40px; } .text{ font-size: 40px; background-color: yellow ; } </style> </head> <body> <div id = "myDiv1"> 我在mydiv1中 <p class="myClass" id = "myP1">我在myP1中</p> <ul id = "ul1"> <li class="myClass" id="li1">1</li> <li id = "li2">2</li> <li id = "li3">3</li> </ul> <input type="text" id="myText1"> <a href="http://www.baidu.com" id="myA1">我是链接</a> </div> <script> //------------------------------使用属性节点的标准方法操作属性--------------------- var a = document.getElementById("myA1"); var a_href = a.getAttributeNode("href");//这才是获取真正的属性节点 console.log(a_href.nodeType, a_href.nodeName, a_href.nodeValue); var href = a.getAttribute("href");//并不是获取属性节点,而是属性值 console.log(href); a.setAttribute("aa", "这是aa属性的值");//用这种方法的本质就是设置了一个真正的属性节点 a.bb = "这是bb属性的值"; //这种方法只是设置了一个a对象的bb属性 var a_aa = a.getAttributeNode("aa");//这才是获取真正的属性节点 console.log(a_aa.nodeType, a_aa.nodeName, a_aa.nodeValue); var myclass = document.createAttribute("class"); myclass.nodeValue = "text"; a.setAttributeNode(myclass); </script> </body> </html>