JavaScript HTML DOM

JavaScript

JavaScript is a high-level, interpreted programming language that is widely used for web development. Initially designed as a client-side scripting language, it runs directly in web browsers, enabling dynamic and interactive user experiences. JavaScript can now be used for server-side development as well.

14 April 2025 | Category: JavaScript

The HTML DOM (Document Object Model) is a programming interface that represents the structure of a web page. JavaScript uses the DOM to access, modify, and interact with HTML elements dynamically.

📌 What is the DOM?

DOM stands for Document Object Model.
It represents the HTML document as a tree of nodes (elements, attributes, text, etc.).
JavaScript can read and change the content, structure, and style of a webpage using the DOM.

🏗️ DOM Tree Example

<html>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The DOM structure:

Document
 └── html
     └── body
         ├── h1
         └── p

🔍 Accessing HTML Elements

You can select and work with HTML elements using JavaScript in multiple ways:

1. getElementById()

<p id="demo">Hello</p>

<script>
  const element = document.getElementById("demo");
  console.log(element.textContent); // Output: Hello
</script>

2. getElementsByClassName()

<div class="item">Item 1</div>
<div class="item">Item 2</div>

<script>
  const items = document.getElementsByClassName("item");
  console.log(items[0].textContent); // Output: Item 1
</script>

3. getElementsByTagName()

<p>One</p>
<p>Two</p>

<script>
  const paragraphs = document.getElementsByTagName("p");
  console.log(paragraphs.length); // Output: 2
</script>

4. querySelector() (returns the first match)

<p class="note">Hello</p>

<script>
  const note = document.querySelector(".note");
  console.log(note.textContent); // Output: Hello
</script>

5. querySelectorAll() (returns all matches)

<p class="note">One</p>
<p class="note">Two</p>

<script>
  const notes = document.querySelectorAll(".note");
  notes.forEach(el => console.log(el.textContent));
</script>

✏️ Modifying Content

1. textContent – Change the text

document.getElementById("demo").textContent = "New text";

2. innerHTML – Change HTML inside the element

document.getElementById("demo").innerHTML = "<strong>Bold text</strong>";

3. style – Change CSS using JavaScript

document.getElementById("demo").style.color = "red";

➕ Creating and Removing Elements

Create an element:

const newEl = document.createElement("p");
newEl.textContent = "I'm new!";
document.body.appendChild(newEl);

Remove an element:

const el = document.getElementById("demo");
el.remove();

🧩 Event Handling in DOM

You can make your webpage interactive using events:

<button id="btn">Click Me</button>

<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("Button Clicked!");
  });
</script>

⚡ Common Events

Event	Description
`click`	Fired when element is clicked
`mouseover`	When mouse hovers over
`mouseout`	When mouse leaves
`keydown`	When a key is pressed
`submit`	When a form is submitted

✅ Summary

The DOM allows JavaScript to access and change HTML elements, content, and styles.
You can select elements using getElementById, querySelector, and other methods.
Use textContent, innerHTML, and style to modify elements.
Add event listeners to make your webpage interactive.