js DOM Element屬性和方法整理

節(jié)點(diǎn)操作，屬性

1. childNodes、children

這兩個(gè)屬性獲取到的子節(jié)點(diǎn)會(huì)根據(jù)瀏覽器的不同而不同的，所以一定要判斷下nodeType是否為1。

childNodes獲取到的是NodeList

children獲取到的是HTMLCollection

NodeList and HTMLCollection

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

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

HTMLCollect提供了這個(gè)方法，可以根據(jù)id或者name屬性來獲取集合的內(nèi)部元素。

但是不同的瀏覽器對(duì)這些方法的實(shí)現(xiàn)有區(qū)別，所以最好就直接用[index]來索引。

?

2. firstChild lastChild firstElementChild lastElementChild

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

firstElementChild和lastElementChild可以直接獲取到Element類型的節(jié)點(diǎn)，IE9+，ff，chrome，safari，opera支持

?

3. nextSibling previousSibling nextElementSibling previousElementSibling

同上

4. parentNode

可以是 Element、Document或DocumentFragment類型

?

5. nodeType nodeName nodeValue tagName

nodeType屬性返回一個(gè)整數(shù)，根據(jù)節(jié)點(diǎn)類型的不同而有不同的值

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

?

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

?

對(duì)于Element節(jié)點(diǎn)來說，nodeName與tagName是一樣的，返回全大寫的標(biāo)簽名

其他類型的節(jié)點(diǎn)有nodeName而沒有tagName

?

6. innerHTML outerHTML

?

節(jié)點(diǎn)操作，方法

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。