DOM

Document Object Model (DOM)

The Document Object Model is usually called the DOM, a model of all the parts of a web page document as nodes in a node tree. It represents the structure of a document like HTML or XML document as a tree of objects, where each object corresponds to a part of the document. It allows JavaScript to interact with and manipulate the content, structure, and style of web pages.

A node tree is similar to a directory tree, except instead of showing directories that include other directories (and files), it shows web page elements that include other elements (and text and attributes).

Each node represents either:

1. an element that represents HTML elements (e.g. <div>, <a>, <p>, etc.)
2. a text item that appears between an element's start and end tags, or
3. an attribute within one of the elements, and
4. comment nodes represents comments in the document.

---

The term dynamic HTML refers to updating the web page’s content by manipulating the DOM’s nodes. Assigning a value to an element object’s outerHTML property shown in Hello World web page is one way to implement dynamic HTML.

The main point of explaining the DOM is for you to get a better grasp of how everything in a web page is represented behind the scenes as an object. As a web programmer, you can use the DOM’s hierarchical structure to access and update different parts of the web page.

---

The DOM provides different ways to access the nodes in the node tree. Here are three common techniques:

1. You can retrieve the node tree’s root by using document (for the document object) in your code and then use the root object as a starting point in traversing down the tree.
2. You can retrieve the node that the user just interacted with (e.g. a button that was clicked) and use that node object as a starting point in traversing up or down the tree.
3. You can retrieve a particular element node by calling the document object’s getElementById method with the element’s id value as an argument.

In the Hello World web page, we used the third technique, calling getElementById.