♟️ [JavaScript高级程序设计]14 DOM
概述
文档对象模型（DOM，Document Object Model）是语言中立的 HTML 和 XML 文档的 API。DOM Level 1 将 HTML 和 XML 文档定义为一个节点的多层级结构，并暴露出 JavaScript 接口以操作文档的底 层结构和外观。 DOM 由一系列节点类型构成，主要包括以下几种。
DOM 编程在多数情况下没什么问题，在涉及<script>和<style>元素时会有一点兼容性问题。因 为这些元素分别包含脚本和样式信息，所以浏览器会将它们与其他元素区别对待。 要理解 DOM，最关键的一点是知道影响其性能的问题所在。DOM 操作在 JavaScript 代码中是代价 比较高的，NodeList 对象尤其需要注意。NodeList 对象是“实时更新”的，这意味着每次访问它都 会执行一次新的查询。考虑到这些问题，实践中要尽量减少 DOM 操作的数量。 MutationObserver 是为代替性能不好的 MutationEvent 而问世的。使用它可以有效精准地监控 DOM 变化，而且 API 也相对简单
节点层级
Document类型
文档对象 document 是 HTMLDocument 的实例（HTMLDocument 继承 Document），表示整个 HTML 页面 存在以下特征：
Element
Element 表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。
可以通过 nodeName 或 tagName 属性来获取元素的标签名。这两个属性返回同样的值。
let div = document.getElementById("myDiv");
alert(div.tagName); // "DIV"
alert(div.tagName == div.nodeName); // true 在 HTML 中，元素标签名始终以全大写表示；在 XML（包括 XHTML）中，标签名始终与源 代码中的大小写一致
文本节点
特征：
操作文本方法
Comment 类型
DOM 中的注释通过 Comment 类型表示。Comment 类型的节点具有以下特征：
CDATASection 类型
CDATASection 类型表示 XML 中特有的 CDATA 区块。CDATASection 类型继承 Text 类型，因 此拥有包括 splitText()在内的所有字符串操作方法
CDATA 区块只在 XML 文档中有效
<div id="myDiv"><![CDATA[This is some content.]]></div>主流的四大浏览器没有一个将其识别为CDATASection。即使在有效的 XHTML 文档中，这些浏览器也不能恰当地支持嵌入的 CDATA 区块。
DocumentType 类型
DocumentType 类型的节点包含文档的文档类型（doctype）信息，具有以下特征：
DocumentType 对象在 DOM Level 1 中不支持动态创建，只能在解析文档代码时创建。对于支持这 个类型的浏览器，DocumentType 对象保存在 document.doctype 属性中。DOM Level 1 规定了 DocumentType 对象的 3 个属性：name、entities 和 notations。其中，name 是文档类型的名称， entities 是这个文档类型描述的实体的 NamedNodeMap，而 notations 是这个文档类型描述的表示 法的 NamedNodeMap。因为浏览器中的文档通常是 HTML 或 XHTML 文档类型，所以 entities 和 notations 列表为空。（这个对象只包含行内声明的文档类型。）无论如何，只有 name 属性是有用的。 这个属性包含文档类型的名称，即紧跟在<!DOCTYPE 后面的那串文本。比如下面的 HTML 4.01 严格文 档类型
<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.01// EN" "http:// www.w3.org/TR/html4/strict.dtd">DocumentFragment 类型
在所有节点类型中，DocumentFragment 类型是唯一一个在标记中没有对应表示的类型。DOM 将 文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗
Attr 类型
元素数据在 DOM 中通过 Attr 类型表示。Attr 类型构造函数和原型在所有浏览器中都可以直接访 问
属性节点尽管是节点，却不被认为是 DOM 文档树的一部分。Attr 节点很少直接被引用，通常开 发者更喜欢使用 getAttribute()、removeAttribute()和 setAttribute()方法操作属性
Dom编程
MutationObserver 接口
小结
文档对象模型（DOM，Document Object Model）是语言中立的 HTML 和 XML 文档的 API。DOM Level 1 将 HTML 和 XML 文档定义为一个节点的多层级结构，并暴露出 JavaScript 接口以操作文档的底 层结构和外观。 DOM 由一系列节点类型构成，主要包括以下几种。
DOM 编程在多数情况下没什么问题，在涉及<script>和<style>元素时会有一点兼容性问题。因 为这些元素分别包含脚本和样式信息，所以浏览器会将它们与其他元素区别对待。 要理解 DOM，最关键的一点是知道影响其性能的问题所在。DOM 操作在 JavaScript 代码中是代价 比较高的，NodeList 对象尤其需要注意。NodeList 对象是“实时更新”的，这意味着每次访问它都 会执行一次新的查询。考虑到这些问题，实践中要尽量减少 DOM 操作的数量。 MutationObserver 是为代替性能不好的 MutationEvent 而问世的。使用它可以有效精准地监控 DOM 变化，而且 API 也相对简单。