淺談js中的attributes和Attribute的用法與區(qū)別

更新時(shí)間：2020年07月16日 16:48:13 作者：老實(shí)憨厚孫業(yè)尤

這篇文章主要介紹了淺談js中的attributes和Attribute的用法與區(qū)別，attributes可以獲取一個(gè)對(duì)象中的一個(gè)屬性，attributes 屬性返回指定節(jié)點(diǎn)屬性的集合，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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="">;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//多了一個(gè)屬性為good;但是沒(méi)有給其設(shè)置屬性值；所以為空。
</script>

// obox.setAttribute("a","b") 返回值是undifined;表示給標(biāo)簽里面加上一個(gè)屬性a;屬性值
     // 為b;若設(shè)置的屬性已經(jīng)存在，那么僅限設(shè)置/更改值;直接設(shè)置 
     //給了標(biāo)簽,看不到返回值，但在html頁(yè)面中可以看到屬性已經(jīng)被添加到了標(biāo)簽中。

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="">;
       //多了一個(gè)屬性,屬性值為空
</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">;
       //在標(biāo)簽中刪除屬性value
</script>

getAttribute，setAttribute，createAttribute，removeAttribute四兄弟的概念比較容易理解，使用方法也比較簡(jiǎn)單，唯一需要注意這幾點(diǎn)：
1、createAttribute在使用的時(shí)候不需要基于對(duì)象的，document.createAttribute()就可以。
2、setAttribute，createAttribute在使用的時(shí)候如果是使用的時(shí)候不要使用name，type，value等單詞.
3、createAttribute在使用的時(shí)候如果只定義了名字，沒(méi)有d.nodeValue = "hello";語(yǔ)句定義值，F(xiàn)F會(huì)認(rèn)為是一個(gè)空字符串，IE認(rèn)為是undefined。

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

例：

<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é)點(diǎn)。參數(shù)：attributenode;必須填寫(xiě)你要添加的屬性節(jié)點(diǎn)。

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

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

二：attributes的用法：

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

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

　　對(duì)象.attributes //獲得所有屬性節(jié)點(diǎn)，返回一個(gè)數(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é)點(diǎn),返回一個(gè)數(shù)組(偽數(shù)組);
 // attributes可以獲取一個(gè)對(duì)象中的一個(gè)屬性，并且作為對(duì)象來(lái)調(diào)用，注意在這里要使用“[]”
 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ù)組中第四個(gè)屬性的屬性名

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

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

</script>

到此這篇關(guān)于淺談js中的attributes和Attribute的用法與區(qū)別的文章就介紹到這了,更多相關(guān)js中attributes和Attribute內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: