HTML 什么是#document

在本文中，我们将介绍HTML中的#document是什么意思。

阅读更多：HTML 教程

什么是#document？

在HTML中，#document是指整个HTML文档的根节点。它代表了整个HTML文档，在DOM树中处于最顶层。#document实际上是一个文档对象模型(DOM)节点，它是DOM树的根节点。

DOM树和节点

DOM树是文档对象模型的一种表现形式，用来表示网页的结构和内容。它由各种节点组成，这些节点代表了文档中的不同部分，比如元素、文本和属性等。每个节点都有自己的属性和方法，可以通过DOM API来访问和操作。

在DOM树中，节点的层次关系代表了它们在网页中的嵌套关系。根节点就是整个文档的节点，也就是#document节点。下面是一个简单的HTML文档的DOM树示例：

#document
└── html
    ├── head
    │   └── title
    │       └── "Hello World"
    └── body
        └── p
            └── "This is a paragraph."

在这个示例中，#document节点是整个DOM树的根节点，它下面有一个html节点，html节点又包含了head和body两个子节点。

#document节点的属性和方法

作为DOM树的根节点，#document节点有一些常用的属性和方法：

documentElement：返回文档的根元素，即html元素。可以通过document.documentElement来访问。
doctype：返回文档的文档类型声明。
createElement(tagName)：创建指定标签名的元素节点。
createTextNode(text)：创建包含指定文本的文本节点。
getElementById(id)：根据元素的id属性获取元素。
getElementsByClassName(className)：根据元素的class属性获取元素列表。
getElementsByTagName(tagName)：根据元素的标签名获取元素列表。
querySelector(selector)：返回匹配指定选择器的第一个元素。
querySelectorAll(selector)：返回匹配指定选择器的所有元素列表。

这些属性和方法可以通过document.的方式来调用，因为#document节点就是document对象本身。

以下是一个简单的示例，演示如何使用#document节点的属性和方法：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p id="paragraph">This is a paragraph.</p>
    <script>
      // 获取body元素
      var body = document.documentElement.childNodes[1];

      // 创建一个新的div元素，并添加到body中
      var div = document.createElement("div");
      div.innerHTML = "Hello, World!";
      body.appendChild(div);

      // 修改p元素的文本内容
      var paragraph = document.getElementById("paragraph");
      paragraph.textContent = "This paragraph is modified.";
    </script>
  </body>
</html>

在这个示例中，我们首先获取了body元素，然后使用createElement方法创建了一个新的div元素，并将其添加到body中。接下来，我们通过getElementById方法获取了id为”paragraph”的p元素，并通过textContent属性修改了它的文本内容。