溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用js中的attributes和Attribute

發(fā)布時間：2020-07-17 09:07:43 來源：億速云 閱讀：641 作者：小豬 欄目：開發(fā)技術

小編這次要給大家分享的是如何使用js中的attributes和Attribute，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

一：Attribute的幾種用法和含義（attributes和Attribute都是用來操作屬性的）

getAttribute：獲取某一個屬性的值；
setAttribute：建立一個屬性，并同時給屬性捆綁一個值；
createAttribute：僅建立一個屬性；
removeAttribute：刪除一個屬性；
getAttributeNode：獲取一個節(jié)點作為對象；
setAttributeNode：建立一個節(jié)點；
removeAttributeNode：刪除一個節(jié)點；

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";語句定義值，F(xiàn)F會認為是一個空字符串，IE認為是undefined。

getAttributeNode，setAttributeNode，removeAttributeNode三個方法的特點是都直接操作一個node（節(jié)點）。

例：

<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() 方法用于添加新的屬性節(jié)點。參數(shù)：attributenode;必須填寫你要添加的屬性節(jié)點。

如果元素中已經存在指定名稱的屬性，那么該屬性將被新屬性替代。如果新屬性替代了已有的屬性，則返回被替代的屬性，否則返回 NULL。

======================================================================

二：attributes的用法：

　　attributes可以獲取一個對象中的一個屬性，并且作為對象來調用，注意在這里要使用“[]”；attributes 屬性返回指定節(jié)點屬性的集合。你可以使用 length 屬性確定屬性的數(shù)量，然后你可以遍歷所有的屬性節(jié)點提取你想要的信息。每個屬性都是可用屬性節(jié)點對象。

　　節(jié)點的方法，前綴一定是節(jié)點。

　　對象.attributes //獲得所有屬性節(jié)點，返回一個數(shù)組（偽數(shù)組）

<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獲得所有的屬性節(jié)點,返回一個數(shù)組(偽數(shù)組);
 // 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;顯示數(shù)組中第四個屬性的屬性名

 console.log(obox.attributes[3].nodeValue); //cont;顯示數(shù)組中第四個屬性的屬性值

 console.log(obox.attributes[3].nodeType); //2; 元素節(jié)點屬性的返回值為2

</script>

看完這篇關于如何使用js中的attributes和Attribute的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手