淺談js中的attributes和Attribute的用法與區(qū)別
一：Attribute的幾種用法和含義（attributes和Attribute都是用來操作屬性的）
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' 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=''>;//多了一個(gè)屬性為good;但是沒有給其設(shè)置屬性值；所以為空。</script>
// obox.setAttribute('a','b') 返回值是undifined;表示給標(biāo)簽里面加上一個(gè)屬性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=''>; //多了一個(gè)屬性,屬性值為空</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四兄弟的概念比較容易理解，使用方法也比較簡(jiǎn)單，唯一需要注意這幾點(diǎn)：1、createAttribute在使用的時(shí)候不需要基于對(duì)象的，document.createAttribute()就可以。2、setAttribute，createAttribute在使用的時(shí)候如果是使用的時(shí)候不要使用name，type，value等單詞.3、createAttribute在使用的時(shí)候如果只定義了名字，沒有d.nodeValue = 'hello';語句定義值，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' 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é)點(diǎn)。參數(shù)：attributenode;必須填寫你要添加的屬性節(jié)點(diǎn)。
如果元素中已經(jīng)存在指定名稱的屬性，那么該屬性將被新屬性替代。如果新屬性替代了已有的屬性，則返回被替代的屬性，否則返回 NULL。
======================================================================
二：attributes的用法：
attributes可以獲取一個(gè)對(duì)象中的一個(gè)屬性，并且作為對(duì)象來調(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' 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ì)象來調(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ù)組中第四個(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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. Android table布局開發(fā)實(shí)現(xiàn)簡(jiǎn)單計(jì)算器2. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼3. 理解PHP5中static和const關(guān)鍵字4. php模擬實(shí)現(xiàn)斗地主發(fā)牌5. IntelliJ IDEA安裝插件的方法步驟6. spring acegi security 1.0.0 發(fā)布7. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)8. Python random庫使用方法及異常處理方案9. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟10. Vuex localStorage的具體使用
網(wǎng)公網(wǎng)安備