如何在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 方法在單擊按鈕時再次生成相同的內容。

<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”，表示該節點是元素節點。

<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+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告