JavaScript DOM (Document Object Model) methods allow developers to interact with HTML documents. These methods are used to select elements, modify content or attributes, handle events, and create dynamic webpages.
The DOM represents the page as a tree of nodes, and JavaScript can access and manipulate these nodes using various methods.
1. Selecting Elements
Before you can manipulate anything on the page, you need to select the target elements. The DOM provides several methods to find elements.
document.getElementById(id)
Selects a single element by its id.
javascriptCopyEditconst title = document.getElementById("main-title");
document.getElementsByClassName(className)
Returns an HTMLCollection of all elements with the specified class.
javascriptCopyEditconst items = document.getElementsByClassName("list-item");
document.getElementsByTagName(tagName)
Returns a list of elements with a given tag name (like div, p, etc.).
javascriptCopyEditconst paragraphs = document.getElementsByTagName("p");
document.querySelector(selector)
Returns the first element that matches a CSS-style selector.
javascriptCopyEditconst button = document.querySelector("#submit-btn");
document.querySelectorAll(selector)
Returns a NodeList of all elements that match a CSS selector.
javascriptCopyEditconst allItems = document.querySelectorAll("ul li");
2. Changing Content
DOM methods allow you to read or change the content of elements.
element.innerHTML
Sets or gets the HTML content inside an element.
javascriptCopyEdittitle.innerHTML = "<span>Updated Title</span>";
element.textContent
Gets or sets only the plain text inside an element.
javascriptCopyEdittitle.textContent = "Plain Title";
3. Working with Attributes
You can use the following methods to manipulate attributes of HTML elements.
element.setAttribute(name, value)
Sets a new attribute or updates an existing one.
javascriptCopyEditdocument.querySelector("a").setAttribute("href", "https://example.com");
element.getAttribute(name)
Returns the value of a specified attribute.
javascriptCopyEditconst link = document.querySelector("a").getAttribute("href");
element.removeAttribute(name)
Removes an attribute from an element.
javascriptCopyEditdocument.querySelector("a").removeAttribute("target");
4. Manipulating Styles
JavaScript lets you change the CSS styles directly via the style property.
javascriptCopyEdittitle.style.color = "blue";
title.style.fontSize = "24px";
5. Creating and Removing Elements
DOM methods allow you to dynamically create, add, and remove elements.
document.createElement(tagName)
Creates a new element.
javascriptCopyEditconst newItem = document.createElement("li");
newItem.textContent = "New List Item";
element.appendChild(child)
Appends a new child to an existing element.
javascriptCopyEditdocument.getElementById("myList").appendChild(newItem);
element.remove()
Removes an element from the document.
javascriptCopyEditdocument.querySelector("li").remove();
6. Event Handling Methods
DOM methods are also used to respond to user interactions.
element.addEventListener(event, function)
Attaches an event handler to an element.
javascriptCopyEditdocument.getElementById("btn").addEventListener("click", function () {
alert("Button clicked!");
});
Common events:
clickmouseovermouseoutsubmitkeydown
Example: Interactive Button
htmlCopyEdit<button id="changeColor">Change Background</button>
<script>
document.getElementById("changeColor").addEventListener("click", function () {
document.body.style.backgroundColor = "lightblue";
});
</script>
Conclusion
JavaScript DOM methods are essential tools for web development. They let you find elements, change content, manipulate attributes, adjust styles, handle events, and create dynamic user interfaces. Understanding these methods is key to building interactive web pages and user-friendly applications.
To master the DOM:
- Practice selecting elements using different methods.
- Try changing HTML content, styles, and attributes.
- Add interactivity with event listeners.