JavaScript DOM Methods
DOM methods are the actions you call on the document or on elements to find, change, and connect parts of the page.
#Jobseeker
Find matching jobs & Auto apply with AI
Methods and properties
Working with the DOM comes down to two ideas. A method is an action you perform, written with parentheses, such as document.getElementById("demo"). A property is a value you read or set, written without parentheses, such as element.textContent. Most DOM tasks combine the two: you call a method to locate an element, then read or assign a property on the result.
Finding an element and updating a property
<!DOCTYPE html>
<html>
<body>
<p id="status">Not saved yet</p>
<script>
// getElementById is a method: it returns the matching element
const status = document.getElementById("status");
// innerHTML is a property: assigning to it replaces the content
status.innerHTML = "<strong>Saved!</strong>";
</script>
</body>
</html>Common ways to find elements
The DOM gives you several finder methods. getElementById returns a single element or null. querySelector returns the first element that matches a CSS selector, and querySelectorAll returns every match as a list you can loop over. The query methods are flexible because they accept the same selectors you already use in CSS.
Different finder methods
<!DOCTYPE html>
<html>
<body>
<h1 id="title">My Page</h1>
<button class="btn">Click me</button>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<script>
// By id (fastest, expects a unique id)
const title = document.getElementById("title");
// First match for a CSS selector
const firstButton = document.querySelector(".btn");
// Every match, returned as a NodeList
const allItems = document.querySelectorAll("ul li");
allItems.forEach((item) => {
console.log(item.textContent);
});
</script>
</body>
</html>Methods that change the page
Beyond finding elements, methods let you build and rearrange the tree. createElement makes a new element in memory, appendChild or append attaches it to a parent, setAttribute adds or updates an attribute, and addEventListener connects your code to user actions such as a click.
Creating and attaching an element
<!DOCTYPE html>
<html>
<body>
<ul id="tasks">
<li>Existing task</li>
</ul>
<script>
// Build a new list item
const li = document.createElement("li");
li.textContent = "New task";
li.setAttribute("class", "task");
// Attach it to an existing list
const list = document.querySelector("#tasks");
list.append(li);
// Respond when it is clicked
li.addEventListener("click", () => {
li.classList.toggle("done");
});
</script>
</body>
</html>
