Day-22 5 Must-Know JavaScript DOM Methods for Beginners

Hi everyone! 👋
Today I explored some powerful DOM manipulation methods in JavaScript. Whether you're building dynamic web pages or adding interactivity to your site, understanding how to select and modify elements is key. Let's dive into what I learned! 💡

🔍 querySelector() – Grab the First Match

The querySelector() method lets you select the first element that matches a CSS selector.

const title = document.querySelector("h1");
console.log(title.textContent);

✅ Use case: When you want to select a specific element, like the first button or heading on the page.

🔎 querySelectorAll() – Select All Matches

Unlike querySelector, querySelectorAll() returns all elements that match the selector. It gives you a NodeList, which you can loop through.

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  console.log(btn.textContent);
});

✅ Use case: When you want to apply changes to multiple elements with the same class or tag.

➕ append() – Add Inside at the End

The append() method adds content inside an element, right after the last child.

const container = document.querySelector(".container");
const newPara = document.createElement("p");
newPara.textContent = "This is added using append.";
container.append(newPara);

✅ Use case: Dynamically add new content at the bottom of an element.

🔼 prepend() – Add Inside at the Start

The prepend() method adds content inside an element, right before the first child.

const container = document.querySelector(".container");
const welcome = document.createElement("h2");
welcome.textContent = "Welcome!";
container.prepend(welcome);

✅ Use case: When you want to show something first, like a title or message.

🎯 insertAdjacentElement() – Add Outside or Inside, Precisely

This method gives you more control by letting you insert an element before, after, or inside a target element.

const target = document.querySelector(".box");
const note = document.createElement("p");
note.textContent = "Inserted next to the box!";
target.insertAdjacentElement("afterend", note);

👉 The positions you can use are:

• "beforebegin" – before the element
• "afterbegin" – inside the element, before its first child
• "beforeend" – inside the element, after its last child
• "afterend" – after the element

✅ Use case: When you need precise placement around an element.

🌟 Summary

🚀 Final Thoughts

These DOM methods are building blocks for creating interactive web pages. Try using them in small projects like to-do lists, modals, or dynamic content loaders. Practice makes perfect!