Document Object Model (DOM)

Document Object Model (DOM)

// change the background color to red
document.body.style.background = "red";

// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);
<script> let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":
[{"name":"#text","nodeType":3,"content":"\n "},{"name":"TITLE","nodeType":1,"children":
[{"name":"#text","nodeType":3,"content":"About elks"}]},{"name":"#text","nodeType":3,"content":"\n "}]},
{"name":"#text","nodeType":3,"content":"\n "},{"name":"BODY","nodeType":1,"children":
[{"name":"#text","nodeType":3,"content":"\n The truth about elks."}]}]} drawHtmlTree(node1, 'div.domtree', 690, 320); </script>
  • The document object gives access to the page content. We can change or create anything on the page using it.
  • The DOM represents HTML as a tree structure of tags. Here's how it looks.
  • All operations start with the document object. From it we can access any node.

Related concepts

→
Document Object Model (DOM)

Document Object Model (DOM) — Structure map

Clickable & Draggable!

Document Object Model (DOM) — Related pages:

XMLHttpRequest and AJAX

DOM tree

Searching: getElement and querySelector

Walking the DOM

Node properties: type, tag and contents

Browser environment, specs