DOM 简单小结

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