DOM
Node 類型
整個 HTML 文檔由各種各樣節點組成，這些節點（共 12 種）都繼承自 Node 類型，所以它們擁有一些共用的屬性和方法。
- 屬性：
- nodeType
- nodeName
- nodeValue
- 節點關係：
- parentNode —> 父節點
- previousSibling —> 前一個兄弟節點
- nextSibling —> 後一個兄弟節點
- ownerDocument —> 節點所屬文檔節點
- childNodes
- 類數組集合，每次訪問時動態搜索查找，所以會影響性能
- NodeList 對象
- 操作節點：
- appendChild —> 向元素末端增加節點，若傳入是已存在的子節點，則會移至最後一位
- insertBefore —> 根據參照節點插入
- replaceChild —> 替換節點
- removeChild —> 移除節點
- cloneNode —> 複製節點，根據參數有 深、淺兩種複製模式
- normalize —> 序列化節點，去除空文本節點
Document 類型
表示整個 HTML 文檔頁面，全局對象
- 文檔子節點：
- documentElement 屬性 </html> 元素
- body 屬性 </body> 元素
- childNodes 屬性
- 文檔信息：
- title
- URL
- domain
- referrer
- 查找元素：
- getElementById
- getElementsByTagName
- 返回 HTMLCollection 對象 注意與 NodeList 對象異同點
- 傳入 * 星號返回所有元素
item&namedItem
- getElementsByName
Element 類型
表示 HTML 元素
- 常用屬性
- id
- className
- title
- 操作 HTML 屬性：
- getAttribute
- setAttribute
- removeAttribute
- 操作特性與訪問屬性
- 兩類特殊屬性：
style&事件處理程序，與直接訪問元素屬性返回不同
- attributes 屬性
- getNamedItem
- setNamedItem
- removeNamedItem
- item(pos)
- 創建元素 document.createElement(tagName)
- 子節點 childNodes
NodeList
深入 NodeList
小結
理解 DOM 對性能的影響
DOM 擴展
Selectors API
- querySelector
- querySelectorAll
- matchesSelector
在後代元素範圍內查找，返回的 NodeList 是一組快照，而非動態搜索查找？
元素遍歷
- childElementCount
- firstElementChild
- lastElementChild
- previousElementSibling
- lastElementSibling
HTML5
- getElementsByClassName
- classList
- add
- contains
- remove
- toggle
- readyState
- load
- complete
- innerHTML
- innerText
DOM2、DOM3
樣式：style 對象
HTML 元素的
style對象，表示當前元素的 style 樣式，CSSStyleDeclaration類型
- 獲取計算樣式 —>
getComputedStyle
元素大小
- 偏移量相關
- offsetHeight
- offsetWidth
- offsetTop
- offsetLeft
- 元素自身
- clientHeight
- clientWidth
- 滾動相關
- scrollHeight
- scrollWidth
- scrollTop
- scrollLeft
遍歷
深度優先
- NodeIterator
document.createNodeIterator(root, ?SHOW_TYPE, ?filter, ?entityReferenceExpansion)iterator.previousNode()iterator.nextNode()
- TreeWalker
document.createTreeWalker() // 參數與 createNodeIterator 相同
除了previousNode()、nextNode()方法外，還有：parentNode()firstChild()lastChild()previousSibling()nextSibling()