• JavaScript Video Tutorials

JavaScript - DOM Methods

In JavaScript, DOM methods are used to perform a particular action on HTML elements. The DOM represents a HTML document or web page with a logical tree. In the tree, each branch ends in a node, and each node contains objects. DOM methods allow us programmatic access to the tree. Using the DOM methods, you can change the document's structure, style, or content.

For example, you can use DOM methods to access HTML elements using id, attribute, tag name, class name, etc., add events to the document or HTML elements, add new HTML elements to the DOM, etc.

Syntax

Following is the syntax to access and execute the DOM method in JavaScript −

window.document.methodName();
OR
document.methodName();

You may or may not use the 'window' object to access the document object's method.

Here, we have explained some HTML DOM methods with examples and covered other methods in the reference.

JavaScript document.getElementById() Method

The JavaScript getElementById() method of the document object is the most popular method to access the HTML elements using the id.

Syntax

Follow the syntax below to use the document.getElementById() method.

const ele = document.getElementById("id");

The getElementById() method takes an id of the HTML element as a parameter.

Example

In the below code, the id of the 'div' element is 'output'.

In JavaScript, we use the document.getElementById() method to access the div element using its id.

Also, we use the 'innerHTML' property of the element to add extra HTML to the 'div' element.

<html>
<body>
   <button onclick = "accessEle()"> Access output and write </button>
   <p id = "output"> </p>
   <script>
      function accessEle() {
         document.getElementById("output").innerHTML = 
			"Hello User! You have just clicked the button!";
      }
   </script>
</body>
</html>

JavaScript document.addEventListener() Method

The addEventListener() method is used to add the event to the document.

Syntax

Follow the syntax below to use the addEventListener() method with a document.

document.addEventListener('mouseover', function () {
// Perform action on the document.
});

The addEventListener() method takes the event name as the first parameter and the callback function as a second parameter.

Example

In the below code, we added the 'mouseover' event to the document. Whenever you hover over the document, it will change the background color of the document body to red.

<html>
<body>
   <h3>JavaScript – document.addEventListener() Method </h3>
   <p> Hover over here to change background color </p>
   <script>
      document.addEventListener('mouseover', function () {
         document.body.style.backgroundColor = 'red';
      });
   </script>
</body>
</html>

JavaScript document.write() Method

The document.write() method adds the text or HTML to the document. It replaces the content of the document with the HTML passed as an argument of the method.

Syntax

Follow the syntax below to use the document.write() method.

document.write(HTML)

You can replace the 'HTML' argument with the text or HTML.

Example

In the below code, we execute the writeText() function when you click the button.

In the function, we use the document.write() method to add HTML to the web page. It replaces the HTML of the whole web page.

<html>
<body>
   <button onclick = "writeText()"> Add HTML </button>
   <script>
      function writeText() {
         document.write("<p>Hello Users, Text is written using the document.write() method. </p>");
      }
   </script>
</body>
</html>

List of DOM Methods

In the below table, we have listed all methods related to the HTML DOM. You can access all methods using the 'document' object.

Method Description
addEventListener() It is used to add an event listener to the document.
adoptNode() It is used to adopt the node from the other documents.
append() It appends the new node or HTML after the last child node of the document.
caretPositionFromPoint() It returns the caretPosition object, containing the DOM node based on the coordinates passed as an argument.
close() It closes the output stream opened using the document.open() method.
createAttribute() It creates a new attribute node.
createAttributeNS() It creates a new attribute node with the particular namespace URI.
createComment() It creates a new comment node with a specific text message.
createDocumentFragment() It creates a DocumentFragment node.
createElement() It creates a new element node to insert into the web page.
createElementNS() It is used to create a new element node with a particular namespace URI.
createEvent() It creates a new event node.
createTextNode() It creates a new text node.
elementFromPoint() It accesses the element from the specified coordinates.
elementsFromPoint() It returns the array of elements that are at the specified coordinates.
getAnimations() It returns the array of all animations applied on the document.
getElementById() It accesses the HTML element using the id.
getElementsByClassName() It accesses the HTML element using the class name.
getElementsByName() It accesses the HTML element using the name.
getElementsByTagName() It accesses the HTML element using the tag name.
hasFocus() It returns the boolean value based on whether any element or document itself is in the focus.
importNode() It is used to import the node from another document.
normalize() It removes the text nodes, which are empty, and joins other nodes.
open() It is used to open a new output stream.
prepand() It is used to insert the particular node before all nodes.
querySelector() It is used to select the first element that matches the css selector passed as an argument.
querySelectorAll() It returns the nodelist of the HTML elements, which matches the multiple CSS selectors.
removeEventListener() It is used to remove the event listener from the document.
replaceChildren() It replaces the children nodes of the document.
write() It is used to write text, HTML, etc., into the document.
writeln() It is similar to the write() method but writes each statement in the new line.
Advertisements