The DOM tree of objects

The DOM tree is a representation of an HTML document in the browser. It allows JavaScript to interact with, manipulate, and traverse the elements of a web page.

Each HTML tag is a node in the tree, and there are three primary types of nodes:

  • Element nodes - representing HTML elements like <div>, <p>, etc.
  • Text nodes - representing the text inside HTML elements.
  • Attribute nodes - representing the attributes of elements (e.g., class, id).

Structure of the DOM tree

The DOM tree has a hierarchical structure. Consider the following HTML:


    <!DOCTYPE html>
    <html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>This is a paragraph.</p>
    </body>
    </html>

This HTML generates the following DOM tree:


Document
└── html
    ├── head
    │   └── title
    │       └── Text: "Example"
    └── body
        ├── h1
        │   └── Text: "Hello World"
        └── p
            └── Text: "This is a paragraph."

Interacting with the DOM tree


const heading = document.querySelector("h1") // selecting the <h1> tag
heading.textContent = "Welcome to the DOM!" // changing the text inside the <h1> tag

const newParagraph = document.createElement("p") // creating a new HTML element (a paragraph)
newParagraph.textContent = "This paragraph was added dynamically." // setting the text inside the new paragraph
document.body.appendChild(newParagraph) // adding the new element to the <body>

The querySelector() method can also address IDs or classes like this: document.querySelector("#id"), document.querySelector(".class"). Alternatively, we can use specific methods to address each element type: getElementById("id"), getElementsByClassName("class"), getElementsByTagName("h1").

The querySelectorAll() method allows us to select all elements that match the specified selector, returning a static NodeList, like this: document.querySelectorAll(".class"), document.querySelectorAll("p"). The "normal" querySelector() method chooses the first element encountered if there are many.

Note that the querySelectorAll() method returns a static NodeList, meaning that if the DOM changes after the selection, the NodeList will not reflect the new changes. On the other hand, methods like getElementsByClassName("class") return a live NodeList, which automatically updates when the DOM is changed.

Text and image modification example


<p id="t">Text</p>
<img src="" alt="Img" id="i">

<script>
    let text = document.querySelector("#t")
    text.innerHTML = "TEXT"
    text.style.color = "orange"
    text.style.backgroundColor = "black"
    text.style.fontSize = "20px"

    let image = document.querySelector("#i")
    image.src = "img.jpg"
    image.style.width = "30%"
</script>

Text

Img

The innerHTML attribute differs from textContent because innerHTML can retrieve or set HTML content, including tags, while textContent only deals with plain text, excluding any HTML.

Dynamically creating an HTML list


let arr = ["a", "b", "c", "d", "e"]
document.write("<ol>")
for (let i = 0; i < arr.length; i++)
    document.write("<li>" + arr[i] + "</li>")
document.write("</ol>")

I will talk more about the DOM tree in the upcoming lessons.