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()

 

參考文檔：https://developer.mozilla.org/en-US/docs/Web/API/element

http://www.w3school.com.cn/xmldom/dom_nodetype.asp

http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/Node.html