JavaScript中getAttribute与attributes的区别及用法详解

<body>
 <div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d=document.getElementById("sss").getAttribute("value");
 console.log(d)  //aaa;
</script>

<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.createAttribute("good");
 document.getElementById("sss").setAttributeNode(d);
 alert(document.getElementById("t").innerHTML) //弹出框<input type="hidden" id="sss" value="aaa" good="">;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//多了一个属性为good;但是没有给其设置属性值；所以为空。
</script>

// obox.setAttribute("a","b") 返回值是undifined;表示给标签里面加上一个属性a;属性值
     // 为b;若设置的属性已经存在，那么仅限设置/更改值;直接设置 
     //给了标签,看不到返回值，但在html页面中可以看到属性已经被添加到了标签中。

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.createAttribute("good");
 document.getElementById("sss").setAttributeNode(d);
 alert(document.getElementById("t").innerHTML) //弹出框<input type="hidden" id="sss" value="aaa" good="">;
       //多了一个属性,属性值为空
</script>

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.getElementById("sss").getAttributeNode("value")　　　　console.log(d)   // value="aaa"
 document.getElementById("sss").removeAttributeNode(d);
 alert(document.getElementById("t").innerHTML); //弹出框<input type = "hidden" id = "sss">;
       //在标签中删除属性value
</script>

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.createAttribute("good");
 document.getElementById("sss").setAttributeNode(d);
 alert(document.getElementById("t").innerHTML); //弹出框<input type="hidden" id="sss" value="aaa" good="">;
</script>

<body>
 <div id = "t">
 <input type = "text" id = "sss" value = "aaa">
</body>
<script type="text/javascript">
 var a=document.getElementById("sss").attributes;
 console.log(a); //NamedNodeMap {0: type, 1: id, 2: value, type: type, id: id, value: value, length: 3}; 　　　　　　　　　　　　　　//attributes获得所有的属性节点,返回一个数组(伪数组);
 // attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”
 var d = document.getElementById("sss").attributes["value"];
 console.log(typeof d);  // object
 console.log(d);   // value="aaa";
 document.write(d.name);  //显示 value
 document.write(d.value);  //显示 aaa
</script>

<body>
 <div class="box" a="10" b="20" id="cont"></div>
</body>
<script>
 var obox=document.querySelector(".box");
 console.log(obox.attributes[3])  //id="cont";

 console.log(typeof obox.attributes[3]) //object;

 console.log(obox.attributes[3].nodeName); //id;显示数组中第四个属性的属性名

 console.log(obox.attributes[3].nodeValue); //cont;显示数组中第四个属性的属性值

 console.log(obox.attributes[3].nodeType); //2; 元素节点属性的返回值为2

</script>