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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM