所谓动态页面, 无论是页面第一次打开页面完成渲染之前就已经发生变化, 还是在后续响应用户的操作时发生, 或者兼而有之, 都会引起 DOM 的变更, 即 DOM 节点的增删改查. 概括地说, 主要包括以下方面:
查找节点
增加节点
删除节点
修改节点属性
查找属性
增加属性
删除属性
修改属性
我们可以通过了解 DOM 的继承关系, 来理解以上这些操作的接口.
DOM 继承对象图
注: 以上四个接口的相关属性和方法并为完全列举
基于以上继承类图, 我们可以知道 DOM 的基本层次结构.
EventTarget 赋予了 DOM 对象处理事件的能力, 即增加监听器, 移除监听器和触发事件.
Node 是对网页中所有的元素的抽象, 网页是节点, 元素是节点, 属性是节点, 文本是节点, 注释也是节点. 作为节点, 需要考虑的有父节点, 子节点(第一个子节点和最后一个子节点), 兄弟节点. 以及对子节点的增加, 删除和替换.
Document 是对网页的抽象, 因此创建网页中的内容 (元素, 属性, 文本...) 的操作由 Document 来完成. 同时, 其中也包含了查询网页中的元素的接口.
Element 是元素的抽象, 最主要的是属性, 因此提供了对属性值的设置和获取和删除属性的接口. 其中的 querySelector 和 querySelectorAll 两个接口主要用来查询当前元素下的子节点, 参数是合法的 CSS 选择器.
来源: http://www.jianshu.com/p/dbb1141a7de3