WDD 330: Web Frontend Development II

The Document Object Model

Overview

The Document Object Model or DOM represents the logical tree structure of a document. The DOM allows us to connect to the document through programming languages. Essentially, the DOM empowers your code to interact with and control the web page in real-time, making it a cornerstone of modern web development.

"The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content. Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed." - MDN Web Docs

Prepare

Activity Instructions

  1. Using the Walking the DOM document from javascript.info, complete the three (3) Tasks provided.
  2. Let us test the concept presented in the previous tasks about non-element nodes in the DOM.
    1. Navigate to the Church website.
    2. Open up the browser's DevTools.
    3. Go to the console tab and clear the contents Ø.
    4. Write a for-of loop that will output to the console all the child nodes of the document.body.
      Hint

      An example of how to do this is found in the Walking the DOM article under DOM collections. Make sure to output to the console and not to pop-up,alert boxes.

      Code Hint 
      for (let node of document.body.childNodes)  console.log(node)
    5. Run this loop in the console. Over 25 child nodes will be displayed.
    6. Find all the non-element nodes (#text).

    Even though these #text nodes are not super interesting, you can use the console to view all sorts of information about each child node of the document.