JS：HTMLDocument 和 Document 及 document 的关系

HTMLDocument、Document 和 document 是 JavaScript DOM（文档对象模型）中三个密切相关的概念。它们之间的关系可以通过 DOM 的层级结构和接口继承来理解。以下是详细的解释：

1. `Document`

定义：
- Document 是 DOM 的核心接口，表示任何类型的文档（如 HTML、XML 等）。
- 它是 DOM 树的根节点，提供了文档级别的操作方法。
作用：
- 提供了通用的文档操作方法，如 getElementById、querySelector、createElement 等。
- 是访问和操作 DOM 的入口。
继承关系：
- EventTarget → Node → Document

示例：

const doc = document; // document 是全局对象，表示当前页面的文档
console.log(doc instanceof Document); // true

2. `HTMLDocument`

定义：
- HTMLDocument 是 Document 的子接口，专门用于表示 HTML 文档。
- 它扩展了 Document 接口，提供了 HTML 文档特有的属性和方法。
作用：
- 提供了 HTML 文档的特定功能，如 body、head、title 等属性。
继承关系：
- EventTarget → Node → Document → HTMLDocument

示例：

const htmlDoc = document; // 在浏览器中，document 通常是 HTMLDocument 的实例
console.log(htmlDoc instanceof HTMLDocument); // 在现代浏览器中可能为 false

3. `document`

定义：
- document 是一个全局对象，表示当前页面的文档实例。
- 它是 Document 接口的具体实现，在浏览器中document 是 HTMLDocument 的实例（在现代浏览器中也直接是 Document 的实例）。
作用：
- 用于操作当前页面的 DOM。
- 例如，document.getElementById、document.title 等。

示例：

console.log(document.title); // 输出当前文档的标题

4. 三者之间的关系

层级关系：
- HTMLDocument 是 Document 的子接口，专门用于 HTML 文档。
- document 是 Document 接口的具体实例，通常是 HTMLDocument 的实例。
从属关系：
- 在浏览器环境中，document 对象通常是 HTMLDocument 的实例。
- HTMLDocument 继承了 Document 的所有属性和方法，并添加了 HTML 特有的功能。
现代 DOM 规范中的变化：
- 在现代 DOM 规范（如 DOM Living Standard）中，HTMLDocument 接口已被合并到 Document 接口中。
- 因此，document 对象直接是 Document 的实例，但仍然支持 HTMLDocument 的所有功能。

5. 代码示例

检查 `document` 的类型

console.log(document instanceof Document); // true
console.log(document instanceof HTMLDocument); // 在现代浏览器中可能为 false

使用 `document` 操作 DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

运行 HTML

// 获取文档标题
console.log(document.title); // 输出: "Example"

// 修改文档标题
document.title = 'New Title';
console.log(document.title); // 输出: "New Title"

// 获取 body 元素
console.log(document.body.innerHTML); // 输出: <h1>Hello, World!</h1>

6. 总结

接口与实例的关系：
- 接口（如 Document 和 HTMLDocument）定义了一组属性和方法，但没有具体的实现。
- 实例（如 document）是接口的具体化，提供了接口定义的功能。
Document：
- 是通用文档接口，适用于所有类型的文档（如 HTML、XML 等）。
HTMLDocument：
- 是 Document 的子接口，专门用于 HTML 文档，提供了 HTML 特有的属性和方法。

document：

是 Document 接口的具体实例，在 HTML 环境中，document 既是 Document 的实例，也是 HTMLDocument 的实例，但现代规范中更推荐将其视为 Document 的直接实例。
用于操作当前页面的 DOM。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        // 验证 document 是 Document 的实例
        console.log(document instanceof Document); // true
        // 验证 document 是 HTMLDocument 的实例
        console.log(document instanceof HTMLDocument); // true

        // 使用 HTMLDocument 特有的 title 属性
        console.log(document.title); // 输出: My Page
    </script>
</body>
</html>

在现代 DOM 规范中，HTMLDocument 的功能已被合并到 Document 中，因此 document 对象直接是 Document 的实例，但仍然支持 HTMLDocument 的所有功能。

1. Document

2. HTMLDocument

3. document