DOM知识总结

获取

通用方式获取

• element.querySelector(selector): 返回HTMLElement
• element.querySelectoAll(selector): 返回NodeList，这个不会根据dom实时更新NodeList，所以要得到最新的还要重新获取

特殊元素获取

• html：document.documentElement
• body: document.body
• head: document.head
• 全部：document.all (第六个falsy值，ie的历史遗留问题，以前用这个来做ie检测)

HTML元素原型链

以下标识省略了.prototype

1. HTMLDivElement
2. HTMLElement
3. Element
   1. requestFullScreen(): 请求全屏
4. Node：node类型
   1. Element：nodeType 1
   2. Text：nodeType 3
   3. Comment
   4. Document
   5. DocumentFragment
5. EventTarget
6. Object

增删改查

增加

• 创建元素节点：document.createElement
• 创建文本节点：document.createTextNode
• 插入文本
  • element.appendChild(textNode)：Node接口
  • element.innerText：Element接口
  • element.textContent：Element接口
• 复制节点：element.cloneNode()

删除

• parentNode.removeChild(node)：Node接口
• element.remove()：element接口

修改

• 坑：标准属性和dataset属性通过点操作符修改会同步到页面，非标准属性使用点操作符不会同步到页面，要使用 setAttribute 方法
• 标准属性
  • class
    • element.className += className
    • element.classList.add(name)
  • style
    • style.[attr] =
  • dataset: element.dataset.attr
• 事件
  • on[event]：
    • 这种事件中的this为浏览器通过 fn.call(element, event) 传入
  • addEventListener
• 内容
  • 文本：innerText，textContent
  • 标签：innerHTML

查询

• 子元素
  • children(Element方法)：仅仅包含元素节点
  • childNodes(Node方法)：注意，这个会包括回车形成的空文字节点
• 家族节点
  • previousSibling(Node)
  • previousElementSibling(Element)
  • nextSibling
  • nextElementSibling
  • firstChild(Node)
  • firstElementChild
  • lastChild(Node)
  • lastElementChild