Open In App

JavaScript HTML DOM

Last Updated : 04 Aug, 2025
Comments
Improve
Suggest changes
5 Likes
Like
Report

The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a page without requiring a page reload.

html
Javascript HTML DOM

Features of JavaScript DOM

  • Tree Structure: The DOM is organized like a family tree, with elements that have parent-child relationships. It is easy to find and change things based on their positions.
  • Element Access: You can use different methods like getElementById, getElementsByTagName, and querySelector to access specific elements on a webpage

Example: This example shows the accessing the JavaScript HTML DOM by id.

HTML 
<html>
<head></head>

<body>
    <h1 id="demo">This is some text.</h1>
    <button onclick="changeText()">
      Change Text
      </button>

    <script>
        function changeText() {
            let element = document.getElementById("demo");
            element.textContent = "Text changed by JavaScript!";
        }
    </script>
</body>

</html>

In this example

  • The useState hook is used to create a state variable subject and a function setSubject to update its value.
  • The handleInputChange function updates the subject state whenever the user types in the input field.
  • The value entered in the input field is dynamically displayed below it as the state updates.

Output

Output
JavaScript HTML DOM

Accessing Elements in the DOM

getElementById()

Retrieves an element by its id.

let heading = document.getElementById("title");
console.log(heading.textContent);

getElementsByClassName()

Returns a collection of elements with a specified class.

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

getElementsByTagName()

Selects elements by their tag name.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

querySelector()

Returns the first element matching a CSS selector.

let firstParagraph = document.querySelector("p");
console.log(firstParagraph.textContent);

querySelectorAll()

Returns all elements matching a CSS selector.

let allParagraphs = document.querySelectorAll("p");
allParagraphs.forEach(p => console.log(p.textContent));

Modifying the DOM

Changing Content

You can modify the content of an element using textContent or innerHTML.

document.getElementById("title").textContent = "New Heading";
document.getElementById("content").innerHTML = "<b>Updated Content</b>";

Changing Attributes

You can modify attributes like src, href, alt, etc.

document.getElementById("myImage").src = "new-image.jpg";

Adding and Removing Elements

Create an element:

let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph.";
document.body.appendChild(newPara);

Remove an element

let oldPara = document.getElementById("removeMe");
oldPara.remove();

Event Handling in the DOM

JavaScript allows us to handle events such as clicks, keypresses, mouse movements, etc.

Adding an Event Listener

document.getElementById("btn").addEventListener("click", function() { 
   alert("Button Clicked!");
});

Removing an Event Listener

function sayHello() { 
   console.log("Hello!");
}
let btn = document.getElementById("btn");
btn.addEventListener("click", sayHello);
btn.removeEventListener("click", sayHello);

Event Object

The event object provides details about the event.

document.getElementById("inputField").addEventListener("keyup", function(event) {
   console.log("Key pressed: ", event.key);
});

Traversing the DOM

JavaScript provides properties to navigate through the DOM tree.

  • parentNode: Gets the parent element.
  • children: Gets all child elements.
  • firstChild / lastChild: Gets the first/last child.
  • nextSibling / previousSibling: Gets the next/previous sibling.

Example:

let parent = document.getElementById("myDiv").parentNode;
console.log(parent.tagName);

Searching the DOM
Visit Course explore course icon

M

mohd_kashif_ahrari
Improve
Article Tags :

Explore

Lightbox