一：Attribute的幾種用法和含義（attributes和Attribute都是用來操作屬性的）
getAttribute：獲取某一個屬性的值；
setAttribute：建立一個屬性，並同時給屬性捆綁一個值；
createAttribute：僅建立一個屬性；
removeAttribute：刪除一個屬性；
getAttributeNode：獲取一個節點作為對象；
setAttributeNode：建立一個節點；
removeAttributeNode：刪除一個節點；
1.getAttribute：
<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>
get 取得的返回值是屬性值。
2.setAtribute：
<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頁面中可以看到屬性已經被添加到了標簽中。
3.createAttribute:
<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>
4.removeAttribute:
<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>
getAttribute，setAttribute，createAttribute，removeAttribute四兄弟的概念比較容易理解
，使用方法也比較簡單，唯一需要注意這幾點：
1、createAttribute在使用的時候不需要基於對象的，document.createAttribute()就可以。
2、setAttribute，createAttribute在使用的時候如果是使用的時候不要使用name，type，value等單詞.
3、createAttribute在使用的時候如果只定義了名字，沒有d.nodeValue = "hello";語句定義值，FF會認為是一個空字符串，IE認為是undefined。
getAttributeNode，setAttributeNode，removeAttributeNode三個方法的特點是都直接操作一個node（節點）。
例：
<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>
setAttributeNode() 方法用於添加新的屬性節點。參數：attributenode;必須填寫你要添加的屬性節點。
如果元素中已經存在指定名稱的屬性，那么該屬性將被新屬性替代。如果新屬性替代了已有的屬性，則返回被替代的屬性，否則返回 NULL。
======================================================================
二：attributes的用法：
attributes可以獲取一個對象中的一個屬性，並且作為對象來調用，注意在這里要使用“[]”；attributes 屬性返回指定節點屬性的集合。你可以使用 length 屬性確定屬性的數量，然后你可以遍歷所有的屬性節點提取你想要的信息。 每個屬性都是可用屬性節點對象。
節點的方法，前綴一定是節點。
對象.attributes //獲得所有屬性節點，返回一個數組（偽數組）
<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>