Hey awesome people! 👋 I’m Vikas Sankhla, a Full Stack Developer and the founder of the Web Codder YouTube channel. Today, we’re going to learn how JavaScript talks to your webpage.

This is SUPER IMPORTANT because it’s how your code:

✅ Changes text
✅ Adds buttons
✅ Moves things around
✅ Changes colors and styles

Sounds cool? Let’s go! 😎

🧐 What Is the DOM (Document Object Model)?

Imagine your webpage is a big family tree 🌳.

• Each HTML tag (like <p>, <div>, <button>) is a family member.
• The whole tree is called the DOM.

So, the DOM is JavaScript’s way of “seeing” your page. It lets you access and change anything on the page!

Example:

htmlCopyEdit<h1>Hello World</h1>
<button>Click Me!</button>

👉 The DOM knows:

• There’s an <h1> with the text “Hello World”
• There’s a <button> that says “Click Me!”

🔎 Accessing HTML Elements

We can grab elements from the DOM using some handy tools. Here are the top ones you’ll use:

1️⃣ document.getElementById()

You use this when an element has an ID.

Example HTML:

htmlCopyEdit<p id="greeting">Hi there!</p>

JavaScript:

jsCopyEditlet myPara = document.getElementById("greeting");
console.log(myPara);  // Shows: <p id="greeting">Hi there!</p>

Super useful if you know the exact ID! ✅

2️⃣ document.querySelector()

This grabs the first match of a CSS selector.

Example:

htmlCopyEdit<p class="message">Hello!</p>

JavaScript:

jsCopyEditlet msg = document.querySelector(".message");
console.log(msg);  // <p class="message">Hello!</p>

You can use IDs, classes, tags… anything CSS-like!

3️⃣ document.querySelectorAll()

This grabs ALL elements that match.

Example:

htmlCopyEdit<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

JavaScript:

jsCopyEditlet items = document.querySelectorAll("li");
console.log(items);  // NodeList of all <li> elements

✍️ Changing Content

Want to change what something says? JavaScript makes it easy.

1️⃣ innerHTML

This changes the HTML inside an element.

jsCopyEditdocument.getElementById("greeting").innerHTML = "<strong>Welcome!</strong>";

✔️ It can add tags like <strong>.

2️⃣ textContent

This changes the text only (no HTML).

jsCopyEditdocument.getElementById("greeting").textContent = "Welcome!";

✔️ Great if you just want plain text.

3️⃣ value

This is for form elements like <input> or <textarea>.

Example:

htmlCopyEdit<input type="text" id="nameBox">

JavaScript:

jsCopyEditdocument.getElementById("nameBox").value = "Vikas";

✔️ It fills in the text box.

🎨 Changing Styles

Want to change colors, fonts, or sizes? Easy! 💅

Using .style

Example:

jsCopyEditlet myPara = document.getElementById("greeting");
myPara.style.color = "blue";
myPara.style.fontSize = "24px";

👉 You can change any CSS property using JavaScript.

Important: CSS properties with dashes (like background-color) become camelCase (backgroundColor).

Example:

jsCopyEditmyPara.style.backgroundColor = "yellow";

🧱 Adding and Removing Elements

Sometimes you want to add new stuff or remove things.

Here’s how:

1️⃣ appendChild()

This adds a new element to the end.

Example:

jsCopyEditlet newItem = document.createElement("li");
newItem.textContent = "New Item";

document.getElementById("myList").appendChild(newItem);

✔️ Boom 💥 – new list item added!

2️⃣ removeChild()

This removes a child element.

Example:

jsCopyEditlet list = document.getElementById("myList");
let firstItem = list.firstElementChild;

list.removeChild(firstItem);

✔️ First list item is gone! 🗑️

3️⃣ insertBefore()

This inserts a new element BEFORE another.

Example:

jsCopyEditlet newItem = document.createElement("li");
newItem.textContent = "I’m first!";

let list = document.getElementById("myList");
let firstItem = list.firstElementChild;

list.insertBefore(newItem, firstItem);

✔️ New item slides in at the top. 🚀

🧠 Key Concepts Recap

🎯 Conclusion

The DOM is like your playground – with JavaScript, you can build, change, and customize your webpage however you like! 🛠️🌟

We covered:

• How the DOM works
• How to grab elements
• How to change content & styles
• How to add or remove elements dynamically

👉 Keep practicing, and soon you’ll be DOM master! 💪

For more awesome coding tutorials:

🎥 Subscribe to my YouTube: https://www.youtube.com/@web_codder/?sub_confirmation=1

📸 Follow us on Instagram: https://www.instagram.com/web_codder_official/

💬 Join our WhatsApp community: https://webcodder.dev/whatsapp

Let’s keep learning and growing together 🚀💻!