Element節點為元素節點,對應着html頁面中具體的標簽
nodeType為1
nodeName為相應的標簽的名
nodeValue為null
Attr為特性節點,對應着每個標簽中的屬性,它是一個節點,但是不存在於DOM的節點樹當中
nodeType為11
nodeName為屬性的名稱
nodeValue為屬性具體的值
<div class="abc" id="_id" dir="ltr" title="_title"></div>
上面一段代碼定義了div的 class(在js中調用class元素時要使用className)dir(從左到右還是從右到左)title等屬性
當得到div對象后,假設對象名為div
1 可以得到
div.className
div.id
div.dir
div.title
可以得到這些屬性的值
同時可以對這些屬性的值進行修改
同時也可以添加屬性
例如div.align="center"
alert(div.id)
div.id="a"
2 setAttribute():可以修改屬性的值,也可以添加屬性
例如div.setAttribute("id","abc")
div.setAttribute("other","kkk")//自己增加的屬性
div.setAttribute("align",“center”)//增加div具有的屬性
getAttribute():得到屬性的值,即可以得到系統具有的屬性的值,也可以得到自己定義的屬性的值
div.getAttribute("id")//得到_id
removeAttribute() 刪除屬性
3attributes屬性
每個元素都有attributes屬性,每個attributes屬性有
getNamedItem()
setNamesItem()
removeNamedItem()
Item()
四個方法
還有一個length屬性,代表屬性的個數
getNamedItem():得到某一個屬性的節點
div.attributes.getNamedItem("id")//返回id屬性的節點 也可以寫成div.attributes["id"]
div.attributes.getNamedItem("id").nodeValue//得到id屬性的值,_id
setNamedItem():為元素添加屬性
div.attributes.getNamedItem(newAttr)//newAttr為新創建的元素,添加到了div中
removeNamedItem():刪除屬性
div.attributes.removeNamedItem("id")//刪除了id屬性
item():得到某一位置的屬性
div.attributes.item(2)//得到第三個,即dir屬性 也可以寫成div.attributes[2]
div.attributes.length 得到屬性的個數
attributes屬性是和NodeList一樣動態變化的,即每增加一個屬性,會馬上在attributes.length中得到反映
每個屬性都有specified屬性,為Boolen屬性,如果為真,表明這個屬性是在元素中定義了或者用js的方法添加到元素中了
如果為假,則說明沒有這個元素
attributes主要用於屬性的遍歷
var arr=new Array();
for(var i=0,var len=div.attributes.length;i<len;i++)
{
if(div.attributes[i].specified)
{
arr.push(div.attributes[i].nodeValue);
}
}
Attr節點
1它有三個屬性
name:屬性節點的名,相當於nodeName
value:屬性節點的值,相當於nodeValue
specified:該屬性節點是否被添加到了標簽中
例如上面的div.attributes[i]就是一個屬性節點
可以獲取他的name,value,specified
它有兩個方法
createAttribute():創建節點
setAttributeNode();將創建的節點添加到元素中
var ali=document.createAttribute("align")//創建了一個align屬性節點
align="center"//為屬性節點賦值
div.setAttributeNode(ali)//將屬性節點添加到div中
