JavaScript DOM Methods

Essential methods for finding and manipulating HTML elements

🔍 What are DOM Methods?

DOM methods are built-in JavaScript functions that help you find, create, and modify HTML elements. They're like tools in your JavaScript toolbox! 


// Finding elements is the first step
let element = document.getElementById("myButton");
element.innerHTML = "Button clicked!";

Finding Elements

🆔

getElementById()

Find element by its ID 

document.getElementById("myId")
🏷️

getElementsByTagName()

Find elements by tag name 

document.getElementsByTagName("p")
📝

getElementsByClassName()

Find elements by class name 

document.getElementsByClassName("myClass")
🎯

querySelector()

Find first element matching CSS selector 

document.querySelector(".myClass")

🔹 getElementById() - Most Common Method

This is the easiest way to find a specific element: 

<!-- HTML -->
<h2 id="title">Original Title</h2>
<button onclick="changeTitle()">Change Title</button>

<script>
function changeTitle() {
    // Find the element with id="title"
    let titleElement = document.getElementById("title");
    titleElement.innerHTML = "New Title!";
}
</script>

Try it:

Original Title

🔹 getElementsByTagName() - Find Multiple Elements

This method returns a list of all elements with the same tag: 

<!-- HTML -->
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button onclick="changeAllParagraphs()">Change All</button>

<script>
function changeAllParagraphs() {
    // Find ALL paragraph elements
    let paragraphs = document.getElementsByTagName("p");
    
    // Loop through each paragraph
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.color = "blue";
        paragraphs[i].innerHTML = "Changed paragraph " + (i + 1);
    }
}
</script>

Try it:

Paragraph 1

Paragraph 2

Paragraph 3

🔹 querySelector() - Modern and Flexible

Use CSS selectors to find elements (recommended for new projects): 

// Find by ID (same as getElementById)
document.querySelector("#myId")

// Find by class
document.querySelector(".myClass")

// Find by tag
document.querySelector("p")

// Find by attribute
document.querySelector("[data-role='button']")

// Complex selectors
document.querySelector("div.container p.highlight")

🔸 Practical Example: 

<div class="card">
    <h3>Card Title</h3>
    <p class="description">Card description</p>
</div>
<button onclick="highlightCard()">Highlight Card</button>

<script>
function highlightCard() {
    // Find the card and change its style
    let card = document.querySelector(".card");
    card.style.backgroundColor = "yellow";
    card.style.padding = "10px";
    
    // Find the description inside the card
    let description = document.querySelector(".card .description");
    description.style.fontWeight = "bold";
}
</script>

🔹 Creating and Adding Elements

You can also create new HTML elements with JavaScript: 

// Create a new paragraph
let newParagraph = document.createElement("p");
newParagraph.innerHTML = "This is a new paragraph!";

// Add it to the page
document.body.appendChild(newParagraph);

🔸 Complete Example: 

<div id="container"></div>
<button onclick="addNewItem()">Add Item</button>

<script>
let itemCount = 0;

function addNewItem() {
    // Create new elements
    let newDiv = document.createElement("div");
    let newText = document.createElement("p");
    
    // Set content
    itemCount++;
    newText.innerHTML = "Item " + itemCount;
    newDiv.style.backgroundColor = "lightblue";
    newDiv.style.padding = "10px";
    newDiv.style.margin = "5px";
    
    // Add text to div, then div to container
    newDiv.appendChild(newText);
    document.getElementById("container").appendChild(newDiv);
}
</script>

Try it:

🧠 Test Your Knowledge

Which method finds an element by its ID?