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.
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>
