JavaScript

The HTML DOM Elements are the actual HTML tags you see in a webpage like <div>, <p>, <h1>, <a>, etc. Using JavaScript, you can access, modify, create, or remove these elements dynamically to make your webpage interactive.

---

What Are DOM Elements?

In the DOM (Document Object Model), each HTML tag becomes a JavaScript object.
For example, this HTML:

<p id="greet">Hello World</p>

Becomes accessible in JavaScript as:

document.getElementById("greet");

That returned object is a DOM Element.

---

How to Access DOM Elements

JavaScript provides several methods to select or target elements in the DOM.

1. getElementById()

const el = document.getElementById("greet");

2. getElementsByClassName()

const boxes = document.getElementsByClassName("box");

3. getElementsByTagName()

const paragraphs = document.getElementsByTagName("p");

4. querySelector() (CSS Selector)

const main = document.querySelector(".main"); // First element with class 'main'

5. querySelectorAll() (Multiple elements)

const allItems = document.querySelectorAll("li.item");

---

Modifying DOM Elements

Once you select an element, you can change its content, style, and more.

Change Text

element.textContent = "New Text";

Change HTML Inside

element.innerHTML = "<strong>Bold text</strong>";

Change Style

element.style.color = "blue";
element.style.backgroundColor = "#eee";

Change Attribute

element.setAttribute("href", "https://example.com");

---

Creating and Inserting New Elements

Create a New Element

const newEl = document.createElement("p");
newEl.textContent = "I’m a new paragraph!";

Insert Into Page

document.body.appendChild(newEl); // Adds to the end of body

Or inside another element:

document.getElementById("container").appendChild(newEl);

---

Removing Elements

Remove directly

element.remove();

Old way (for older browsers)

element.parentNode.removeChild(element);

---

Full Example

<div id="app">
  <h1 id="title">Welcome</h1>
  <button onclick="changeText()">Click Me</button>
</div>

<script>
  function changeText() {
    const heading = document.getElementById("title");
    heading.textContent = "Thanks for clicking!";
    heading.style.color = "green";
  }
</script>

---

Recap – What You Can Do with DOM Elements

Select elements using id, class, tag, or CSS selector
Read or change their text/HTML
Style them with JavaScript
Create, insert, or delete elements
Dynamically update the page content

---

Conclusion

JavaScript DOM Elements are the heart of any interactive website. By learning how to manipulate them, you gain full control over how your webpage behaves and looks.

---