JavaScript HTML DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. In JavaScript, you can use the DOM to manipulate elements on a web page dynamically, responding to user actions or other events.

What is the DOM?

The DOM treats an HTML document as a tree of nodes, where each node represents part of the page. The most common types of nodes include:

• Document node – Represents the whole document.
• Element nodes – Represent HTML elements like <div>, <p>, <ul>, etc.
• Text nodes – Represent the text inside elements.
• Attribute nodes – Represent element attributes like class, id, etc.

Accessing the DOM

To work with the DOM using JavaScript, you can use several built-in methods. These methods are available on the document object.

Common DOM Selectors

1. getElementById(id)
   Returns the element with the specified ID. javascriptCopyEditconst heading = document.getElementById("main-title");
2. getElementsByClassName(class)
   Returns a collection of elements with the specified class. javascriptCopyEditconst items = document.getElementsByClassName("list-item");
3. getElementsByTagName(tag)
   Returns all elements with the specified tag name. javascriptCopyEditconst paragraphs = document.getElementsByTagName("p");
4. querySelector(selector)
   Returns the first element that matches a CSS selector. javascriptCopyEditconst firstItem = document.querySelector(".list-item");
5. querySelectorAll(selector)
   Returns all elements that match a CSS selector. javascriptCopyEditconst allItems = document.querySelectorAll("ul li");

Modifying the DOM

Once you have selected an element, you can manipulate it using properties and methods.

Changing Content

• innerHTML
  Changes the HTML content inside an element. javascriptCopyEditdocument.getElementById("main-title").innerHTML = "Welcome!";
• textContent
  Changes only the text content (ignores HTML tags). javascriptCopyEditdocument.getElementById("main-title").textContent = "Hello World";

Changing Attributes

• setAttribute()
  Sets a new attribute or changes the value of an existing one. javascriptCopyEditdocument.getElementById("link").setAttribute("href", "https://example.com");
• getAttribute()
  Gets the value of an attribute. javascriptCopyEditconst href = document.getElementById("link").getAttribute("href");

Changing Styles

You can change styles directly through the style property.

javascriptCopyEditdocument.getElementById("box").style.backgroundColor = "blue";
document.getElementById("box").style.fontSize = "20px";

Creating and Removing Elements

Create a New Element

javascriptCopyEditconst newItem = document.createElement("li");
newItem.textContent = "New List Item";
document.querySelector("ul").appendChild(newItem);

Remove an Element

javascriptCopyEditconst itemToRemove = document.querySelector("li");
itemToRemove.remove();

Event Handling

You can make your webpage interactive by listening to events.

javascriptCopyEditdocument.getElementById("btn").addEventListener("click", function () {
    alert("Button Clicked!");
});

Common events:

• click
• mouseover
• mouseout
• keydown
• submit

Example: Interactive List

htmlCopyEdit<ul id="todo-list">
  <li>Learn HTML</li>
  <li>Learn CSS</li>
</ul>
<button id="add-btn">Add JavaScript</button>

<script>
  document.getElementById("add-btn").addEventListener("click", function () {
    const newItem = document.createElement("li");
    newItem.textContent = "Learn JavaScript";
    document.getElementById("todo-list").appendChild(newItem);
  });
</script>

Conclusion

The HTML DOM is a powerful tool that lets you create dynamic, interactive web pages. By understanding how to select elements, change content, and handle events, you can build engaging websites with just JavaScript. Experiment with different selectors and methods to gain confidence and build more complex interactions.