淺談js中的attributes和Attribute的用法與區別
一：Attribute的幾種用法和含義（attributes和Attribute都是用來操作屬性的）
getAttribute：獲取某一個屬性的值；setAttribute：建立一個屬性，并同時給屬性捆綁一個值；createAttribute：僅建立一個屬性；removeAttribute：刪除一個屬性；getAttributeNode：獲取一個節點作為對象；setAttributeNode：建立一個節點；removeAttributeNode：刪除一個節點；
1.getAttribute：
<body> <div id = 't'><input type = 'hidden' 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' value = 'aaa'></div></body><script> var d = document.createAttribute('good'); document.getElementById('sss').setAttributeNode(d); alert(document.getElementById('t').innerHTML) //彈出框<input type='hidden' value='aaa' good=''>;//多了一個屬性為good;但是沒有給其設置屬性值；所以為空。</script>
// obox.setAttribute('a','b') 返回值是undifined;表示給標簽里面加上一個屬性a;屬性值 // 為b;若設置的屬性已經存在，那么僅限設置/更改值;直接設置 //給了標簽,看不到返回值，但在html頁面中可以看到屬性已經被添加到了標簽中。
3.createAttribute:
<body><div id = 't'><input type = 'hidden' value = 'aaa'></div></body><script> var d = document.createAttribute('good'); document.getElementById('sss').setAttributeNode(d); alert(document.getElementById('t').innerHTML) //彈出框<input type='hidden' value='aaa' good=''>; //多了一個屬性,屬性值為空</script>
4.removeAttribute:
<body><div id = 't'><input type = 'hidden' 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' value = 'aaa'></div></body><script> var d = document.createAttribute('good'); document.getElementById('sss').setAttributeNode(d); alert(document.getElementById('t').innerHTML); //彈出框<input type='hidden' value='aaa' good=''>;</script>
setAttributeNode() 方法用于添加新的屬性節點。參數：attributenode;必須填寫你要添加的屬性節點。
如果元素中已經存在指定名稱的屬性，那么該屬性將被新屬性替代。如果新屬性替代了已有的屬性，則返回被替代的屬性，否則返回 NULL。
======================================================================
二：attributes的用法：
attributes可以獲取一個對象中的一個屬性，并且作為對象來調用，注意在這里要使用“[]”；attributes 屬性返回指定節點屬性的集合。你可以使用 length 屬性確定屬性的數量，然后你可以遍歷所有的屬性節點提取你想要的信息。每個屬性都是可用屬性節點對象。
節點的方法，前綴一定是節點。
對象.attributes //獲得所有屬性節點，返回一個數組（偽數組）
<body> <div id = 't'> <input type = 'text' 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 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內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備