Skip to main content

What is DOM in JavaScript?

HTML DOM stands for "Document Object Model", which is a programming interface for web documents.

The HTML DOM defines the way that HTML elements are accessed and manipulated by web developers using JavaScript.

Using the HTML DOM, developers can add, delete, or modify HTML elements on a web page, change their attributes and styles, and respond to user interactions such as mouse clicks or keyboard input.

Here's some common DOM methods that are frequently used:

  • getElementById(): retrieves an HTML element with a specific ID.
document.getElementById("myDiv"); // returns the element with id="myDiv"
  • getElementsByTagName(): retrieves all HTML elements with a specific tag name.
document.getElementsByTagName("p"); // returns all <p> elements
  • getElementsByClassName(): retrieves all HTML elements with a specific class name.
document.getElementsByClassName("myClass"); // returns all elements with class="myClass"
  • querySelector(): retrieves an HTML element that matches a specific CSS selector.
document.querySelector("#myDiv"); // returns the element with id="myDiv"
  • innerHTML: retrieves or sets the HTML content of an element.
document.getElementById("myDiv").innerHTML; // returns the HTML content of the element with id="myDiv"
document.getElementById("myDiv").innerHTML = "Hello, World!"; // sets the HTML content of the element with id="myDiv" to "Hello, World!"
  • setAttribute(): sets the value of an attribute of an element.
document.getElementById("myDiv").setAttribute("class", "myClass"); // sets the class attribute of the element with id="myDiv" to "myClass"
  • addEventListener(): adds an event listener to an element.
document.getElementById("myButton").addEventListener("click", myFunction); // calls myFunction() when the element with id="myButton" is clicked

Benifts of DOM​

JavaScript can be used to create interactive forms that validate user input, dynamically update the content of a web page based on user actions, and provide real-time feedback to the user.

Take a look at the following Benifts of DOM:

  • Dynamically create and remove HTML elements
  • Modify the content of HTML elements
  • Change the attributes and styles of HTML elements
  • Respond to user input and events, such as clicks, key presses, and mouse movements
  • Update the position and layout of HTML elements on the page
  • Add and remove classes from HTML elements to change their appearance
  • Access and modify the values of form elements, such as input fields and checkboxes
  • Retrieve and update data from a web server using AJAX requests.

Example of DOM Manipulation​

Editor

Loading...

Explanation:

  • We have a div element with the id "myDiv" that contains the text "Hello, World!".
  • We also have a button element with an onclick attribute that calls the changeText() function when clicked.
  • The changeText() function uses the document.getElementById() method to select the myDiv element, and then sets its innerHTML property to "Hello, Students!".
  • This updates the text displayed on the page from "Hello, World!" to "Hello, Students!" when the button is clicked.