DEV Community

Visali Nedunchezhian
Visali Nedunchezhian

Posted on

HTML DOM (Document Object Model)

The HTML DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the structure of a web page as a tree of objects, so that programming languages like JavaScript can access and manipulate the content, structure, and style of a website dynamically.

Key Concepts of the HTML DOM:

  1. Document Structure The DOM represents an HTML document as a tree of nodes:
  • Document → the root node
  • Element nodes (like <html>, <body>, <div>)
  • Text nodes (text inside elements)
  • Attribute nodes (like id, class)

2. Common DOM Methods

Used with JavaScript to interact with the page:

- document.getElementById("myId");
- document.getElementsByClassName("myClass");
- document.querySelector("div > p");
- document.createElement("div");
- element.appendChild(newElement);
- element.removeChild(childElement);
Enter fullscreen mode Exit fullscreen mode

3. DOM Events

document.getElementById("btn").addEventListener("click", function() {
  alert("Button clicked!");
});
Enter fullscreen mode Exit fullscreen mode

4. Changing the DOM

You can modify elements using properties like:

element.innerHTML = "New content";
element.style.color = "red";
element.setAttribute("class", "highlight");
Enter fullscreen mode Exit fullscreen mode

Top comments (0)