JavaScript - DOM Document

Previous
Quiz
Next

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.

Window Document Object

The URL Property

JavaScript DOM Document Methods

List of JavaScript DOM document methods are −

Sr.No Method & Description
1. writeln()

This method provides the functionality to write HTML or JavaScript expressions directly to a document. It adds a newline character after each statement.
2. write()

This method provides the functionality to write HTML or JavaScript expressions directly to a document.
3. hasFocus()

It is used for determining if the document or any element inside the document has focus or not.
4. renameNode()

It is used to rename the nodes.
5. open()

This method opens a document for writing.
6. normalizeDocument()

This method normalize an entire HTML document.
7. normalize()

It removes empty text nodes, and joins adjacent text nodes from parent node.
8. adoptNode()

This method adopts a node from another document into the current document.
9. addEventListener()

It is used to set up a function that will be called whenever the specified event is delivered to the target.
10. execCommand()

This method is used for executing a command specified on the editable section that is being selected by the user.
11. createTextNode()

It is used to create a text node with the specified text.
12. createEvent()

It is used for creating an event object whose event type is specified in the parameter.
13. createDocumentFragment()

It creates a new empty document fragment which resides in memory.
14. createComment()

This method is used for creating a comment node with the given text.
15. createAttribute()

It is used to create an attribute with a specific name using JavaScript for an HTML element and return the Attr object.
16. close()

It closes the output stream.
20. getElementsByTagName()

It is a read-only method which is used to get the collection of all the elements in the document having the specified tag name in parameter.
21. getElementsByName()

This method is used to return collection of elements with the name attribute specified in the parameter.
22. getElementsByClassName()

This method is used for getting the collection of all the elements in the document with specified class name.
23. getElementById()

It returns the element of the given ID.
24. createElement()

This method creates an HTML element specified by tag name or element name.

JavaScript DOM Document Properties

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

Sr.No Properties & Description
1. URL

It is a read-only property which returns the complete URL of the document including the protocol.
2. title

This property is used to set or get the title of the document.
3. strictErrorChecking

It is used to determine whether document enforce strict error checking or not.
4. scripts

It is a read-only property used for returning all the script elements present within HTML document as a collection.
5. links

The links is a read-only property which returns a collection of all the links corresponding to a and area elements with href attribute.
6. lastModified

This property returns the date and time of the current document when it was last modified.
7. inputEncoding

The inputEncoding property returns a String which represents the documents character encoding.
8. implementation

This returns a DOMImplementation object which is associated with the current document.
9. images

It is a read-only property used for returning all the img elements present within HTML document as a collection.
10. head

The head property returns the HTML head element.
11. forms

The forms is a read-only property used for returning all the form elements present within HTML document as a collection.
12. embeds

It is a read-only property which returns all the embed elements present within HTML document as a collection.
13. domConfig

This property is deprecated due to which will return undefined in all new browsers.
14. domain

It is used for getting the domain name of the server on which the document is currently being executed.
15. documentURI

This property is used to set or return the document's location.
16. documentMode

The documentMode property is an IE8 property which determines the rendering mode used by browser.
17. documentElement

It returns the documentElement as an Element Object.
18. doctype

This property returns the DTD (Document Type Declaration) that are associated with the current HTML document.
19. designMode

It helps us to determine if the entire document is editable or not.
20. defaultView

It is used for returning document's window object.
21. cookie

The HTML DOM document cookie property is used for creating, reading and deleting cookies.
22. charset

It returns the character encoding of the HTML document.
23. applets

It is used to return a list of all the applets elements within a document but this property is now deprecated.
24. characterSet

This property is used to get character encoding of the document.
25. anchors

The anchors property is a read only property which lists all the "a" tag with name attribute in the document.
26. baseURI

It is used to return the base Uniform Resource Identifier (URI) 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
Print Page
Previous
Next
Advertisements