What are DOM Methods?
DOM (Document Object Model) methods are built-in JavaScript functions used to access, create, modify, and remove HTML elements. They help make web pages interactive by allowing JavaScript to manipulate the content and structure of a webpage.
1. getElementById()
Purpose: Selects an element using its unique id.
Syntax
document.getElementById("id");
Example
<h1 id="title">Hello</h1>
const heading = document.getElementById("title");
heading.innerHTML = "Welcome";
2. getElementsByClassName()
Purpose: Selects all elements with the same class name.
Syntax
document.getElementsByClassName("className");
Example
<p class="fruit">Apple</p>
<p class="fruit">Orange</p>
const fruits = document.getElementsByClassName("fruit");
console.log(fruits[0].innerHTML);
3. getElementsByTagName()
Purpose: Selects all elements with the specified HTML tag.
Syntax
document.getElementsByTagName("tagName");
Example
<h2>HTML</h2>
<h2>CSS</h2>
const heading = document.getElementsByTagName("h2");
console.log(heading[1].innerHTML);
4. querySelector()
Purpose: Selects the first element that matches a CSS selector.
Syntax
document.querySelector("selector");
Example
<p class="text">Hello</p>
<p class="text">Welcome</p>
const text = document.querySelector(".text");
console.log(text.innerHTML);
5. querySelectorAll()
Purpose: Selects all elements that match a CSS selector.
Syntax
document.querySelectorAll("selector");
Example
<p class="text">One</p>
<p class="text">Two</p>
<p class="text">Three</p>
const text = document.querySelectorAll(".text");
console.log(text[2].innerHTML);
6. createElement()
Purpose: Creates a new HTML element.
Syntax
document.createElement("tagName");
Example
const p = document.createElement("p");
p.innerHTML = "New Paragraph";
7. appendChild()
Purpose: Adds a new element to the end of a parent element.
Example
document.body.appendChild(p);
8. removeChild()
Purpose: Removes a child element from its parent.
Example
const parent = document.getElementById("box");
const child = document.getElementById("text");
parent.removeChild(child);
9. setAttribute()
Purpose: Adds or updates an attribute.
Example
const img = document.getElementById("photo");
img.setAttribute("src", "image.jpg");
10. getAttribute()
Purpose: Gets the value of an attribute.
Example
const link = document.getElementById("myLink");
console.log(link.getAttribute("href"));
11. addEventListener()
Purpose: Attaches an event to an element.
Example
<button id="btn">Click</button>
const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
alert("Button Clicked!");
});
12. removeEventListener()
Purpose: Removes an event listener from an element.
Example
btn.removeEventListener("click", myFunction);
Summary
| Method | Purpose |
|---|---|
getElementById() |
Select an element by ID |
getElementsByClassName() |
Select elements by class |
getElementsByTagName() |
Select elements by tag |
querySelector() |
Select the first matching element |
querySelectorAll() |
Select all matching elements |
createElement() |
Create a new HTML element |
appendChild() |
Add an element to the page |
removeChild() |
Remove a child element |
setAttribute() |
Set an attribute |
getAttribute() |
Get an attribute value |
addEventListener() |
Attach an event |
removeEventListener() |
Remove an attached event |
Top comments (0)