JavaScript - DOM Document

---

---

JavaScript DOM Document

The JavaScript DOM document object owns all objects in the webpage. It represents the webpage. When the webpage is loaded in the web browser, it creates an HTML DOM 'document' object. It is the root of the HTML document.

The DOM document object contains the various properties and methods you can use to get details about HTML elements and customize them. With document objects, JavaScript can access, and change document's structure, content or style.

To access any HTML element, you should always start accessing with the DOM document object.

Accessing DOM Document Object

The webpage is represented as the DOM document object. If we want to access any element in the webpage, we need to first start accessing the document object. In JavaScript, the document object is a property of the window object. So we can access the document object as a property of window object using window.document syntax. We can also access it without writing window.

window.document

or simply

document

This interactive example will help you understand the working of document.getElementById() method.

JavaScript DOM Document Methods

List of JavaScript DOM document methods are −

JavaScript DOM Document Properties

In the following table, we have listed JavaScript DOM document properties −

Here, we have explained some properties of the HTML DOM 'document' object with examples in JavaScript.

Document childElementCount Property

In JavaScript, the childElementCount property of the document object returns the count of the child elements of the document.

Syntax

Follow the syntax below to use the childElementCount property of document object in JavaScript.

document.childElementCount;

Example

In the below code, the childElementCount property returns 1, as the document contains only 1 child element,

. Other HTML elements are the child of the body.

<html>
<body>
   <div>First Element</div>
   <div>Second Element</div>
   <div>Third Element</div>
   <div id = "output"> </div>
   <script>
      document.getElementById('output').innerHTML = 
      "Total number of child elements in the document is: " + document.childElementCount;
   </script>
</body>
</html>

Output

First Element
Second Element
Third Element
Total number of child elements in the document is: 1

Document Links Property

The Document Links property returns the collection of all links of the document. After that, you can use the for...of loop to traverse the collection of links.

Syntax

Follow the syntax below to use the document 'links' property in JavaScript.

document.links;

Example

In the below code, the web page contains the two <a> elements. We access their href attribute's value using the links property.

After that, we used the for...of loop to traverse the collection of links and print them on the web page.

<html>
<body>
   <div> <a href = "https://tutorialspoint.com/"> Home </a> </div>
   <div> <a href = "https://www.tutorialspoint.com/articles/category/javascript"> JavaScript </a> </div>
   <div id = "output"> </div>
   <script>
      const allLinks = document.links;
      document.getElementById("output").innerHTML += "The webpage contains the below links. <br>";
      for (let link of allLinks) {
         output.innerHTML += link + "<br>";
      }
   </script>
</body>
</html>

Output

Home
JavaScript
The webpage contains the below links.
https://tutorialspoint.com/
https://www.tutorialspoint.com/articles/category/javascript

Document Title Property

In JavaScript, the DOM document title property returns the title of the web page.

Syntax

Follow the syntax below to access the DOM document title of the web page.

document.title;

Example

In the below code, we have added the <title> tag in the <head> tag.

After that, we used the 'title' property of the document to access the web page's title.

<html>
<head>
   <title> JavaScript - HTML DOM Document </title>
</head>
<body>
   <div id = "output">The title of the document is: </div>
   <script>
      document.getElementById("output").innerHTML += document.title;
   </script>
</body>
</html>

Output

The title of the document is: JavaScript - HTML DOM Document