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