DEV Community

Mahalakshmi C
Mahalakshmi C

Posted on

DOM in JavaScript

#javascript #programming

DOM in JavaScript

DOM stands for Document Object Model. It is a programming interface that allows JavaScript to access and manipulate HTML documents.

When a web page is loaded in the browser, the browser creates a DOM representation of the HTML page. JavaScript can use the DOM to select, modify, add, or remove HTML elements.

For example, consider the following HTML:

<h1 id="title">Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

Using JavaScript, we can access and change this element.

document.getElementById("title").textContent = "Welcome to JavaScript";
Enter fullscreen mode Exit fullscreen mode

After executing the JavaScript code, the content of the <h1> element changes from:

Hello World
Enter fullscreen mode Exit fullscreen mode

to:

Welcome to JavaScript
Enter fullscreen mode Exit fullscreen mode

DOM Tree

The browser represents an HTML document as a tree of objects called the DOM Tree.

In the DOM, every HTML element is treated as an object called a node.

JavaScript can use these nodes to interact with the web page.

Selecting HTML Elements

JavaScript provides several methods to select elements.

1. getElementById()

The getElementById() method is used to select an element using its id.

<h1 id="title">Hello</h1>
Enter fullscreen mode Exit fullscreen mode 
let element = document.getElementById("title");

console.log(element);
Enter fullscreen mode Exit fullscreen mode

2. getElementsByClassName()

The getElementsByClassName() method is used to select elements using a class name.

<p class="message">Hello</p>
<p class="message">Welcome</p>
Enter fullscreen mode Exit fullscreen mode 
let elements = document.getElementsByClassName("message");

console.log(elements);
Enter fullscreen mode Exit fullscreen mode

This method returns a collection of elements because multiple HTML elements can have the same class name.

3. getElementsByTagName()

The getElementsByTagName() method is used to select elements using their tag name.

<p>First paragraph</p>
<p>Second paragraph</p>
Enter fullscreen mode Exit fullscreen mode 
let elements = document.getElementsByTagName("p");

console.log(elements);
Enter fullscreen mode Exit fullscreen mode

This method returns a collection of all <p> elements.

4. querySelector()

The querySelector() method selects the first element that matches a CSS selector.

<h1 class="title">JavaScript DOM</h1>
Enter fullscreen mode Exit fullscreen mode 
let element = document.querySelector(".title");

console.log(element);
Enter fullscreen mode Exit fullscreen mode

Here, .title is a CSS class selector.

We can also select elements using an id selector.

document.querySelector("#title");
Enter fullscreen mode Exit fullscreen mode

Or using a tag selector.

document.querySelector("h1");
Enter fullscreen mode Exit fullscreen mode

5. querySelectorAll()

The querySelectorAll() method selects all elements that match a CSS selector.

<p class="message">Hello</p>
<p class="message">Welcome</p>
Enter fullscreen mode Exit fullscreen mode 
let elements = document.querySelectorAll(".message");

console.log(elements);
Enter fullscreen mode Exit fullscreen mode

This method returns a collection of all elements with the class "message".

Changing Text Content

The textContent property is used to change or access the text inside an HTML element.

For example:

Changing HTML Content

The innerHTML property is used to access or change the HTML content inside an element.

<div id="content"></div>
Enter fullscreen mode Exit fullscreen mode 
document.getElementById("content").innerHTML =
    "<h2>Welcome</h2>";
Enter fullscreen mode Exit fullscreen mode

This adds an <h2> element inside the <div>.

The result in the browser will be:

Welcome
Enter fullscreen mode Exit fullscreen mode

Changing CSS Styles

JavaScript can also change the CSS styles of an HTML element using the style property.

Creating a New Element

The document.createElement() method is used to create a new HTML element.

For example:

let heading = document.createElement("h2");

heading.textContent = "New Heading";

document.body.appendChild(heading);
Enter fullscreen mode Exit fullscreen mode

Here, JavaScript creates a new <h2> element and adds it to the <body>.

Removing an Element

The remove() method is used to remove an HTML element.

Adding an Event

The DOM also allows JavaScript to respond to user actions such as clicking a button.

For example:

<button id="btn">Click Me</button>

<h1 id="message"></h1>
Enter fullscreen mode Exit fullscreen mode 
let button = document.getElementById("btn");

button.addEventListener("click", function() {
    document.getElementById("message").textContent =
        "Button Clicked";
});
Enter fullscreen mode Exit fullscreen mode

When the user clicks the button, the text "Button Clicked" appears on the web page.

Common DOM Methods

Method Description
getElementById() Selects an element using its ID
getElementsByClassName() Selects elements using a class name
getElementsByTagName() Selects elements using a tag name
querySelector() Selects the first matching element
querySelectorAll() Selects all matching elements
createElement() Creates a new HTML element
appendChild() Adds an element to another element
remove() Removes an element

Common DOM Properties

Property Description
textContent Changes or accesses text content
innerHTML Changes or accesses HTML content
style Changes CSS styles
value Gets or changes the value of an input element

Conclusion

The DOM allows JavaScript to interact with HTML elements on a web page. Using the DOM, we can select elements, change text and HTML content, modify CSS styles, create new elements, remove existing elements, and respond to user actions.

Understanding the DOM is important because it helps us create dynamic and interactive web pages using JavaScript.

Top comments (0)