文档对象模型是语言中立的HTML和XML文档的API。 DOM Level 1 将HTML和XML 文档定义为一个节点的多层级结构,并暴露出javascript 接口 以操作文档的底层结构和外观。
DOM有一系列节点类型构成,主要包括以下几种。
Node 是基准节点类型,是文档一个部分的抽象表示,所有其他类型都继承Node。
Document 类型表示整个文档,对应树形结构的根节点。在javascript中, document 对象是Document的实例,拥有查询和获取节点的很多方式。
Element节点表示文档中所有HTML或XML元素,可以用来操作它们的内容和属性。
其他节点类型分别表示文本内容、主持、文档类型、CDATA区块和文档片段。
DOM编程在多数情况下没什么问题,在涉及<script>和<stype>元素时会有一点兼容性问题。 因为这些元素分别包含脚本和样式信息,所有浏览器会将它们与其他元素区别对象。
要理解DOM,最关键的一点是知道影响其他性能的问题所在。 DOM操作在javascript 代码中是代价比较高的,NodeList对象尤其需要注意。 NodeList 对象是‘实时更新’的, 这意味着每次访问它都会执行一次新的查询。考虑到这些问题。实践中要尽量减少DOM操作的数量。
MutationObserver 是为代替性能不好的MutationEvent 而问世的。 使用它可以有效精准地监控DOM变化。而且API也相对简单。