淺談js中的attributes和Attribute的用法與區(qū)別
一：Attribute的幾種用法和含義（attributes和Attribute都是用來操作屬性的）
getAttribute：獲取某一個屬性的值；setAttribute：建立一個屬性，并同時給屬性捆綁一個值；createAttribute：僅建立一個屬性；removeAttribute：刪除一個屬性；getAttributeNode：獲取一個節(jié)點作為對象；setAttributeNode：建立一個節(jié)點；removeAttributeNode：刪除一個節(jié)點；
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;但是沒有給其設(shè)置屬性值；所以為空。</script>
// obox.setAttribute('a','b') 返回值是undifined;表示給標(biāo)簽里面加上一個屬性a;屬性值 // 為b;若設(shè)置的屬性已經(jīng)存在，那么僅限設(shè)置/更改值;直接設(shè)置 //給了標(biāo)簽,看不到返回值，但在html頁面中可以看到屬性已經(jīng)被添加到了標(biāo)簽中。
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'>; //在標(biāo)簽中刪除屬性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會認(rèn)為是一個空字符串，IE認(rèn)為是undefined。
getAttributeNode，setAttributeNode，removeAttributeNode三個方法的特點是都直接操作一個node（節(jié)點）。
例：
<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() 方法用于添加新的屬性節(jié)點。參數(shù)：attributenode;必須填寫你要添加的屬性節(jié)點。
如果元素中已經(jīng)存在指定名稱的屬性，那么該屬性將被新屬性替代。如果新屬性替代了已有的屬性，則返回被替代的屬性，否則返回 NULL。
======================================================================
二：attributes的用法：
attributes可以獲取一個對象中的一個屬性，并且作為對象來調(diào)用，注意在這里要使用“[]”；attributes 屬性返回指定節(jié)點屬性的集合。你可以使用 length 屬性確定屬性的數(shù)量，然后你可以遍歷所有的屬性節(jié)點提取你想要的信息。每個屬性都是可用屬性節(jié)點對象。
節(jié)點的方法，前綴一定是節(jié)點。
對象.attributes //獲得所有屬性節(jié)點，返回一個數(shù)組（偽數(shù)組）
<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獲得所有的屬性節(jié)點,返回一個數(shù)組(偽數(shù)組); // attributes可以獲取一個對象中的一個屬性，并且作為對象來調(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 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>
到此這篇關(guān)于淺談js中的attributes和Attribute的用法與區(qū)別的文章就介紹到這了,更多相關(guān)js中attributes和Attribute內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. HTML5 Canvas繪制圖形從入門到精通2. HTTP協(xié)議常用的請求頭和響應(yīng)頭響應(yīng)詳解說明（學(xué)習(xí)）3. HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)4. XML入門的常見問題(三)5. HTML DOM setInterval和clearInterval方法案例詳解6. Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑7. 不要在HTML中濫用div8. jscript與vbscript 操作XML元素屬性的代碼9. CSS清除浮動方法匯總10. XML在語音合成中的應(yīng)用
網(wǎng)公網(wǎng)安備