淺談js中的attributes和Attribute的用法與區別
一：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>
到此這篇關於淺談js中的attributes和Attribute的用法與區別的文章就介紹到這了,更多相關js中attributes和Attribute內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！