前面的話

　　元素的特性在DOM中以Attr類型表示，從技術角度講，特性是存在于元素的attributes屬性中的節點。盡管特性是節點，但卻不是DOM節點樹的一部分。本文將詳細介紹該部分內容

?

特征

　　特性節點的三個node屬性————nodeType、nodeName、nodeValue分別是2、特性名稱和特性值，其父節點parentNode是null

　　[注意]關于特性節點是否存在子節點，各個瀏覽器表現不一致

<div id="box"></div> <script> var oBox = document.getElementById('box'); var oAttr = oBox.attributes; //(chrome\safari\IE9 \firefox) 2 id box null //(IE7-) 2 onmsanimationiteration null null console.log(oAttr[0].nodeType,oAttr[0].nodeName,oAttr[0].value,oAttr[0].parentNode) //(chrome\firefox) undefined //(safari) Text //(IE9 ) box //(IE8-) 報錯 console.log(oAttr[0].childNodes[0]) </script>

?

屬性

　　Attr特性節點有3個屬性：name、value和specified

name　

　　name是特性名稱，與nodeName的值相同

value

　　value是特性的值，與nodeValue的值相同

specified

　　specified是一個布爾值，用以區別特性是在代碼中指定的，還是默認的。這個屬性的值如果為true，則意味著要么是在HTML中指定了相應特性，要么是通過setAttribute()方法設置了該屬性。在IE中，所有未設置過的特性的該屬性值都為false，而在其他瀏覽器中，所有設置過的特性的該屬性值都是true，未設置過的特性，如果強行為其設置specified屬性，則報錯。因為undefied沒有屬性

<div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); var oAttr = oBox.attributes; //(chrome\safari\IE8 )class class true //(firefox)id id true //(IE7-)onmsanimationiteration onmsanimationiteration true console.log(oAttr[0].name,oAttr[0].nodeName,oAttr[0].name == oAttr[0].nodeName) //IE7- "null" null false //其他瀏覽器 box box true console.log(oAttr[0].value,oAttr[0].nodeValue,oAttr[0].value == oAttr[0].nodeValue) //IE7- false //其他瀏覽器 true console.log(oAttr[0].specified)//true </script> <div class="box" id="box" name="abc" index="123" title="test"></div> <script> var oBox = document.getElementById('box'); console.log(oBox.attributes.id.specified)//true console.log(oBox.attributes.onclick.specified)//在IE7-瀏覽器下會返回false，在其他瀏覽器下會報錯 </script>

　　specified常常用于解決IE7-瀏覽器顯示所有特性的bug

<div class="box" id="box" name="abc" index="123" title="test"></div> <script> function outputAttributes(element){var pairs = new Array(),attrName,attrValue,i,len;for(i = 0,len=element.attributes.length;i<len;i ){attrName = element.attributes[i].nodeName;attrValue = element.attributes[i].nodeValue;if(element.attributes[i].specified){pairs.push(attrName "=\"" attrValue "\""); }}return pairs.join(" "); } //所有瀏覽器下都返回title="test" class="box" id="box" index="123" name="abc"(順序不一樣) console.log(outputAttributes(document.getElementById("box"))) </script>

?

方法

createAttribute()

　　createAttribute()方法傳入特性名稱并創建新的特性節點

setAttributeNode()

　　setAttributeNode()方法傳入特性節點并將特性添加到元素上，無返回值

getAttributeNode()

　　getAttributeNode()方法傳入特性名并返回特性節點

removeAttributeNode()

　　removeAttributeNode()方法傳入特性名刪除并返回刪除的特性節點，但IE7-瀏覽器下無法刪除

<div id="box"></div> <script> var oBox = document.getElementById('box'); var attr = document.createAttribute('title'); attr.value = "test"; console.log(oBox.setAttributeNode(attr));//null console.log(oBox.getAttributeNode("title").name,attr.name);//title title console.log(oBox.getAttributeNode("title").value,attr.value);//test test //返回刪除的節點 console.log(oBox.removeAttributeNode(attr)); //IE7-瀏覽器下無法刪除，其他瀏覽器返回null console.log(oBox.getAttributeNode("title")); </script>

?

最后

　　特性節點在12種節點類型中排行老二，但是其屬性和方法并不常用，因為元素節點都有對應的可替代的方法，而且使用起來更為方便

　　本文的重點再重復一次：特性是節點，但不存在DOM樹中

　　以上

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的深入理解DOM节点类型第六篇——特性节点Attribute的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。