js DOM Element屬性和方法整理

節點操作，屬性

1. childNodes、children

這兩個屬性獲取到的子節點會根據瀏覽器的不同而不同的，所以一定要判斷下nodeType是否為1。

childNodes獲取到的是NodeList

children獲取到的是HTMLCollection

NodeList and HTMLCollection

他們都提供了name(Number index)方法用來索引元素，可以直接用[index]來引用；

他們的區別在于NodeList沒有提供namedItem(String name)方法

HTMLCollect提供了這個方法，可以根據id或者name屬性來獲取集合的內部元素。

但是不同的瀏覽器對這些方法的實現有區別，所以最好就直接用[index]來索引。

?

2. firstChild lastChild firstElementChild lastElementChild

firstChild和lastChild獲取到的元素也要判斷下nodeType才可以使用

firstElementChild和lastElementChild可以直接獲取到Element類型的節點，IE9+，ff，chrome，safari，opera支持

?

3. nextSibling previousSibling nextElementSibling previousElementSibling

同上

4. parentNode

可以是 Element、Document或DocumentFragment類型

?

5. nodeType nodeName nodeValue tagName

nodeType屬性返回一個整數，根據節點類型的不同而有不同的值

nodeType	Named Constant	nodeName	nodeValue
1	ELEMENT_NODE	標簽名	null
2	ATTRIBUTE_NODE	屬性名	屬性值
3	TEXT_NODE	#text	節點文本
4	CDATA_SECTION_NODE	#cdata-section	節點文本
5	ENTITY_REFERENCE_NODE	?實體引用名	null
6	ENTITY_NODE	實體名	null
7	PROCESSING_INSTRUCTION_NODE	?--	?--
8	COMMENT_NODE	#comment	注釋文本
9	DOCUMENT_NODE	#document	null
10	DOCUMENT_TYPE_NODE	?doctype的內容	null
11	DOCUMENT_FRAGMENT_NODE	#document-fragment	null
12	NOTATION_NODE	?	null

?

IE9+等瀏覽器有NODE.ELEMENT_NODE等定義

?

對于Element節點來說，nodeName與tagName是一樣的，返回全大寫的標簽名

其他類型的節點有nodeName而沒有tagName

?

6. innerHTML outerHTML

?

節點操作，方法

1. insertBefore

2. appendChild

3. removeChild

4. replaceChild

5. insertAdjacentHTML

6. hasChildNodes

cloneNode

?

選擇器

7. getElementById getElementsByName getElementsByTagName getElementsByClassName?

querySelector querySelectorAll

屬性

7. attributes

8. ?hasAttribute getAttribute setAttribute removeAttribute hasAttributes

位置，尺寸

clientHeight clientWidth clientLeft clientTop

offsetHeight offsetWidth offsetLeft offsetTop

offsetParent

scrollHeight scrollWidth scrollLeft scrollTop

getBoundingClientRect()

getClientRects()

總結

以上是生活随笔為你收集整理的js DOM Element属性和方法整理的全部內容，希望文章能夠幫你解決所遇到的問題。

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