節點操作,屬性
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