📚 Topic Summary
The Document Object Model (DOM) is like a blueprint of a webpage. It represents the page's structure as a tree of objects. Each HTML element, attribute, and text node becomes a node in this tree. Unplugged activities help visualize and understand this structure without needing to write code immediately. Think of it as learning the rules of a game before playing it on the computer!
🧠 Part A: Vocabulary
Match the term with its definition:
| Term |
Definition |
| 1. Element |
A. A characteristic or property of an HTML element. |
| 2. Node |
B. The root of the DOM tree, representing the entire document. |
| 3. Attribute |
C. A basic building block of an HTML document (e.g., <p>, <div>). |
| 4. Document |
D. A single point in the DOM tree representing an element, attribute, or text. |
| 5. Root |
E. The top-level node in a tree structure. |
(Answers: 1-C, 2-D, 3-A, 4-B, 5-E)
📝 Part B: Fill in the Blanks
The DOM represents a web page as a ______ structure. Each ______ in the HTML document becomes a ______ in the DOM. We can access and manipulate these ______ using JavaScript.
(Answers: tree, element, node, nodes)
💡 Part C: Critical Thinking
Imagine you have a simple HTML page with a heading, a paragraph, and an image. Describe how the DOM would represent this page as a tree. What would be the root node, and what would be its children?