如何在JavaScript中使用document.documentElement？

在本教程中，我们将学习如何在 JavaScript 中使用 document.documentElement 属性。

JavaScript DOM 是一个 JavaScript 脚本，可以动态地读取或更改网页的内容。JavaScript DOM 中提供了许多属性。我们可以访问、更改和设置网页上每个元素的样式。`document` 是 DOM 的属性，它是 HTML 网页的根。它又包含其子属性。

documentElement 是 DOM 中 document 属性的子属性。它用于获取文档的根元素。它返回一个包含文档根元素的对象。我们可以访问根元素并收集数据或设置其样式。对根元素的任何更改都将应用于整个页面。

因此，让我们看看如何在 JavaScript 中使用 document.documentElement。

在 JavaScript 中使用 document.documentElement

document.documentElement 是 JavaScript DOM 的一个属性。DOM 的 documentElement 属性用于查找文档的根元素。此属性返回文档根元素的对象。这是一个只读属性，这意味着您只能使用它来显示输出。您不能使用此属性更改任何内容。

可以将一些属性应用于此属性。nodeName 属性可以用作子属性，它返回根元素的名称。在 HTML 中，它显示 HTML 作为输出。

nodeType 属性返回具有特定含义的整数值。如果它输出 1，则文档根节点是元素节点。

所有用户都可以使用以下语法在 JavaScript 中使用 document.documentElement 方法

语法

//returns the root element
document.documentElement;
//returns the name of the root element
document.documentElement.nodeName;
//return '1' if it is an element node
document.documentElement.nodeType;

按照上述语法在 JavaScript 中使用 document.documentElement。

示例 1

在这个例子中，我们使用了 JavaScript 中 DOM 的 documentElement 方法。使用 documentElement 方法，我们找到了文档的根元素。然后，单击按钮会在屏幕上显示根元素中的内容。这意味着我们使用 JavaScript 中的 document.documentElement 方法在单击按钮时再次生成相同的内容。

Open Compiler
<html>
<head>
   <style>
      p {
         color: red;
         background-color: greenyellow;
         width: fit-content;
         margin: 5px;
      }
   </style>
</head>
<body>
   <div id="div">
      <h2>Working with <i>document.documentElement</i> in JavaScript</h2>
      <button id="btn">submit</button>
   </div>
   <script>
      document.getElementById("btn").addEventListener("click", func);
      function func() {
         var element = document.createElement('p');
         var data = document.documentElement.innerHTML;
         element.innerHTML = data;
         document.getElementById("div").appendChild(element);
      }
   </script>
</body>
</html>

在上面的例子中，用户可以看到我们使用 document.documentElement 方法访问了文档的全部内容，并使用 innerHTML 属性再次显示。

示例 2

在这个例子中，我们使用了 documentElement 对象的 nodeType 和 nodeName 属性。使用 nodeName，我们获得了根文档元素的名称为 HTML。使用 nodeType 属性，我们得到了输出“1”，表示该节点是元素节点。

Open Compiler
<html>
<head>
   <style>
      p {
         color: red;
         background-color: whitesmoke;
         width: fit-content;
      }
   </style>
</head>
<body>
   <div id="div">
      <h2>Working with <i>document.documentElement</i> in JavaScript</h2>
   </div>
   <button id="btn">submit</button>
   <script>
      document.getElementById("btn").addEventListener("click", func);
      function func() {
         var element = document.createElement('p');
         element.innerHTML = "Name of the node: " + document.documentElement.nodeName;
         var element1 = document.createElement('p');
         element1.innerHTML = "Type of the node: " + document.documentElement.nodeType;
         document.getElementById("div").appendChild(element);
         document.getElementById("div").appendChild(element1);
      }
   </script>
</body>
</html>

在上面的例子中，用户可以看到我们通过使用 JavaScript DOM 的 Document.documentElement 属性获得了文档根元素的名称和类型。

在本教程中，我们学习了如何在 JavaScript 中使用 document.documentElement。

更新于：2022年10月31日

3K+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告