JavaScript - DOM Document

HTML DOM Document

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

The DOM Document Properties

The HTML DOM document object provides us with many properties that can be used to access and manipulate the HTML elements.

Here, we have listed all properties of the document object.

Property	Description
activeElement	To get the currently focused element in the HTML document.
adoptedStyleSheets	It sets the array of the newly constructed stylesheets to the document.
baseURI	To get the absolute base URI of the document.
body	To set or get the document's <body> tag.
characterSet	To get the character encoding for the document.
childElementCount	To get a count of the number of child elements of the document.
children	To get all children of the document.
compatMode	To get a boolean value representing whether the document is rendered in the standard modes.
contentType	It returns the MIME type of the document.
cookie	To get the cookies related to the document.
currentScript	It returns the script of the document whose code is currently executing.
defaultView	To get the window object associated with the document.
designMode	To change the editability of the document.
dir	To get the direction of the text of the document.
doctype	To get the document type declaration.
documentElement	To get the <html> element.
documentURI	To set or get the location of the document.
embeds	To get all embedded (<embed>) elements of the document.
firstElementChild	To get the first child element of the document.
forms	It returns an array of <form> elements of the document.
fullScreenElement	To get the element that is being presented in the full screen.
fullScreenEnabled	It returns the boolean value, indicating whether the full screen is enabled in the document.
head	It returns the <head> tag of the document.
hidden	It returns a boolean value, representing whether the document is considered hidden.
images	It returns the collection of the <img> elements.
lastElementChild	It returns the last child element of the document.
lastModified	To get the last modified date and time of the document.
links	To get the collection of all <a> and <area> elements.
location	To get the location of the document.
readyState	To get the current state of the document.
referrer	To get the URL of the document, which has opened the current document.
scripts	To get the collection of all <script> elements in the document.
scrollingElement	To get the reference to the element which scrolls the document.
styleSheets	It returns the style sheet list of the CSSStyleSheet object.
timeLine	It represents the default timeline of the document.
title	To set or get the title of the document.
URL	To get the full URL of the HTML document.
visibilityState	It returns the boolean value, representing the visibility status of the document.

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