Skip to main content

Document Object Model with HTML/JavaScript

Short answer

The DOM is a W3C standard tree of nodes representing an HTML document, accessible through the document object. JavaScript finds elements, changes content, style, attributes, adds or removes nodes, and handles events, making pages dynamic without reloading.

What is Document Object Model (DOM)? Explain DOM on the basis of HTML / Javascript.

The Document Object Model (DOM) is a W3C standard, language-independent programming interface that represents an HTML or XML document as a tree of objects (nodes). Programs such as JavaScript can use it to read and change the document's content, structure and style after the page has loaded.

DOM tree

<html><body>
  <h1 id="t">Hello</h1>
  <p class="a">Text</p>
</body></html>

document
  |
 html
  |
 body
 /   \
h1    p
|     |
"Hello" "Text"

Everything is a node: the document node, element nodes (<h1>), attribute nodes (id) and text nodes. Nodes have parent, child and sibling relationships.

DOM with HTML and JavaScript

The browser builds the DOM from HTML and exposes it through the global document object. JavaScript can:

  • Find elements: document.getElementById("t"), getElementsByClassName(), getElementsByTagName(), querySelector().
  • Change content: element.innerHTML, element.textContent.
  • Change attributes and style: element.setAttribute("src","a.png"), element.style.color = "red".
  • Add/remove elements: createElement(), appendChild(), removeChild().
  • Handle events: onclick, addEventListener("click", fn).
<h1 id="t">Hello</h1>
<button onclick="change()">Click</button>
<script>
function change(){
  var h = document.getElementById("t");
  h.innerHTML = "Hello, DOM!";
  h.style.color = "green";
  var p = document.createElement("p");          // new node
  p.appendChild(document.createTextNode("Added by JS"));
  document.body.appendChild(p);
}
</script>

Thus the DOM makes pages dynamic and interactive without reloading.

✓ Answer checked by Claude Opus 5.5 (high effort)

Related questions

All Web Technology chapter 4 questions →