1. 程式人生 > >HTML DOM之屬性的各種操作方法

HTML DOM之屬性的各種操作方法

1.element.getAttribute(attributename)方法用來返回指定屬性名的屬性值,返回的型別是字串型別

這裡寫圖片描述

2.element.getAttributeNode(attributename)方法從當前元素節點(nodeType值為1的節點)element中通過名稱獲取屬性節點(nodeType值為2的節點),返回值是指定的屬性節點

這裡寫圖片描述

3.element.setAttribute(attributename,attributevalue)方法新增指定的屬性,併為其賦指定的值。如果這個指定的屬性已存在,則僅設定/更改值,無返回值

4.element.setAttributeNode(attributenode)方法用來向元素中新增指定的屬性節點。如果這個指定的屬性已存在,則此方法會替換它

這裡寫圖片描述

5.element.removeAttribute(attributename)方法用來刪除指定的屬性。沒有返回值

注意:此方法與 removeAttributeNode() 方法的差異是:removeAttributeNode() 方法刪除指定的 Attr 物件,而此方法刪除具有指定名稱的屬性。結果是相同的。同時此方法不返回值,而 removeAttributeNode() 方法返回被刪除的屬性,以 Attr 物件的形式

6.element.removeAttributeNode(attributenode)方法用來刪除指定的屬性,並以 Attr Node 物件返回被刪除的屬性。返回值是Attr型別的物件

7.element.hasAttribute(attributename)方法用來判斷如果存在指定屬性,則 hasAttribute() 方法返回 true,否則返回 false

8.node.hasAttributes()方法用來判斷節點(不僅僅是元素節點element)是否擁有屬性,擁有屬性則返回true,否則返回false。如果指定節點不是元素節點,則返回值始終是 false。

注意:

**- Node(節點)是DOM層次結構中的任何型別物件的通用名稱,Node有很多型別,如元素節點(element),屬性節點(attr),文字節點(text),註釋節點(comments)等,通過NodeType區分

**- Element繼承了Node類,也就是說Element是Node多種型別中的一種,即當NodeType為1時Node即為ElementNode,另外Element擴充套件了Node,Element擁有id、class、children等屬性

**- 簡單的說就是Node是一個基類,DOM中的Element,Text和Comment都繼承於它。 換句話說,Element,Text和Comment是三種特殊的Node,它們分別叫做ELEMENT_NODE, TEXT_NODE和COMMENT_NODE

那麼下面為什麼”document.body.childNodes.length”的結果是9呢?

這裡寫圖片描述

實際上Node表示的是DOM樹的結構,在html中,節點與節點之間是可以插入文字的,這個插入的空隙就是TEXT_NODE

這裡寫圖片描述

這下就順理成章了,body的直系元素(3)+ COMMENT_NODE(1) + TEXT_NODE(5) = 9

注意:我們用childNodes找到了NodeList,但我們操作DOM時往往不想操作Node(我只想操作元素Element),那麼如何獲取ElementList呢?其實我們經常使用的getElementsByXXX返回的就是一個ElementList,只不過它的真實名字是ElementCollection。就像NodeList是Node的集合一樣,ElementCollection也是Element的集合。但需要特別注意的是:NodeList和ElementCollcetion都不是真正的陣列。如果document.getElementsByTagName(‘a’) instanceof Array,那麼必然是false。