DocumentType 和 Mutation Observer 更新为 ES11-JavaScript中文网-JavaScript教程资源分享门户

DocumentType 和 Mutation Observer 更新为 ES11

在 Web 开发中，Document Type 和 Mutation Observer 可以说是前端开发者经常用到的两个重要概念。前者用于定义 HTML 中文档类型，而后者则用于监听 HTML 的文档树的变化。近日，随着 ECMAScript 2020 的发布，Document Type 和 Mutation Observer 也经过了更新，此文将详细介绍这两者在 ES11 中的变化。

更新 Document Type

在早期版本的 HTML 中，文档声明为 <!DOCTYPE html> ，它的目的是告诉浏览器该文档应使用哪个版本的 HTML 来解析，以确保网站能够得到正确的渲染。随着 HTML5 的出现，文档类型的声明变得更加简单，信息也更加明确。在 ES11 中，我们可以使用以下代码声明文档类型：

const documentType = new DOMImplementation().createDocumentType(qualifiedName, publicId, systemId);

其中 qualifiedName 是必需的，表示文档类型的全名；publicId 和 systemId 则是可选参数，用于提供更多的信息。我们来看一个示例：

const documentType = new DOMImplementation().createDocumentType('html', '', '');
console.log(documentType);  // ➡️ <!DOCTYPE html>

这里我们使用 DOMImplementation() 来创建一个 documentType 对象，并将其传递给 createDocumentType() 方法中。我们指定了文档类型的全名为 "html"，公共 ID 和系统 ID 均为空，它将返回一个 <!DOCTYPE html> 的字符串。在实际开发中，我们可以使用外部的 HTML 文件来完成此操作，如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'doctype.html');
xhr.responseType = 'document';
xhr.onload = function() {
  console.log(xhr.response.doctype);  // ➡️ <!DOCTYPE html>
};
xhr.send();

在这个示例中，我们向服务器发送了一个 GET 请求，且响应类型为 document。加载成功后，我们可以通过 xhr.response.doctype 来访问相应的 documentType 对象。这个技巧可以用于在页面中加载外部 HTML 文件时，生成 document 对象。

更新 Mutation Observer

Mutation Observer 是 DOM API 中的一个重要组件，它可以用于监听 DOM 树中的变化。在 ES11 中，Mutation Observer 也经过了升级，它现在能够更灵活地处理数据，且功能更为强大。

我们可以利用 Mutation Observer 来监测 DOM 元素中的任何更改。比如改动了它的属性、子节点被添加或删除等等。观察器会跟踪这些变化，并且执行一个 JavaScript 回调函数来处理这些变化。

让我们看一下如何在 ES11 中使用 Mutation Observer：

-- -------------------- ---- -------
----- ---------------- - ----------------------------------------------

----- -------- - --- ---------------------------------------- -
  --- ---- -------- -- -------------- -
    -- -------------- --- ------------- -
      ---------------- - - ---------------------- - - --------- --- ------------
    - ---- -- -------------- --- ------------ -
      ---------------- ----- ----- ---- ---- ----- -- -----------
    -
  -
---

---------------------------------- - ----------- ----- ---------- ----- -------- ---- ---

在这里我们使用 elementToObserve 属性来指定要监控的 DOM 元素。然后，我们创建了一个 MutationObserver 实例，传递一个回调函数并开始监听摩棱两个参数：attributes 和 childList。subtree 参数表示我们需要监听子节点的变化。一旦监听器开始工作，它会持续观察指定元素的变化，并在适当时候执行回调函数。

总结

本文介绍了 ES11 中关于 Document Type 和 Mutation Observer 的更新，帮助开发者更好地掌握了这两个概念在新语法下的用法。通过本文的学习，你可以更加深入地了解 JavaScript 的 DOM 操作，以及如何使用 Mutation Observer 监测这些更改。这将为你将来的前端开发工作带来便利。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648ec0dd48841e9894d27201

Document​Type 和 Mutation Observer 更新为 ES11

DocumentType 和 Mutation Observer 更新为 ES11