How to work with document.documentElement in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to work with document.documentElement property in JavaScript.

JavaScript DOM is a JavaScript script that can dynamically read or change the webpage's content. There are numerous properties available in the JavaScript DOM. We can access, change and style every element on the webpage. The document is the property of dom that is the root of the HTML webpage. It again consists of its child properties.

The documentElement is the child property of the document property in dom. It is used to get the root element of the document. It returns an object consisting of the root element of a document. We can access the root element and collect the data or style it. Any change on the root element will be applied to the overall page.

So, Let us look at how to work with document.documentElement in JavaScript.

Working with document.documentElement in JavaScript

The document.documentElement is a property of JavaScript DOM. The documentElement property of the dom is useful for finding the document's root element. This property returns the object of the root element of the document. This is the read-only property, meaning you can only use it to display output. You cannot change any content by using this property.

Some properties can be applied to this property. The nodeName property can be used as a child property that returns the root element's name. In HTML, it displays HTML as a output.

The nodeType property returns the integer value that has specific meanings. If it outputs one, the document root node is the element node.

All the users can use the below syntax to use the document.documentElement method in JavaScript:

Syntax

//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;

Follow the above syntax to work with document.documentElement in JavaScript.

Example 1

In the example, we have used the documentElement method of DOM in JavaScript. Using the documentElement method, we have found the root element of our document. Then the content in the root element is displayed on the screen with a button click. That means we generate the same content again on a button click using the document.documentElement method in JavaScript.


<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>

In the above example, users can see that we accessed the total content of the document using a document.documentElement method and displayed again using the inner HTML property.

Example 2

In the example, we have used the nodeType and nodeName properties of the documentElement object. Using the nodeName, we got the name of the root document element as HTML. Using the nodeType property, we have got the '1' as an output that denotes the node is an element node.


<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>

In the above example, users can see that we have gotten the name and the type of the root element of our document by using the Document.documentElement property of JavaScript dom.

In this tutorial, we have learned to work with document.documentElement in JavaScript.