Module 1: DOM Fundamentals - Study Notes
📚 Overview
Duration: Week 1
Goal: Understand the foundation of how web pages work and how to interact with them using
JavaScript.
🎯 Learning Objectives
By the end of this module, you will be able to:
✅ Explain what the DOM is and how it works
✅ Describe the relationship between HTML, CSS, and JavaScript
✅ Use proper DOM terminology confidently
✅ Identify different types of DOM nodes
✅ Use basic DOM properties to inspect and modify web pages
📖 Section 1.1: Introduction to the DOM
What is the Document Object Model (DOM)?
Simple Definition: The DOM is how JavaScript sees and interacts with your webpage.
Think of it like this:
HTML = The blueprint of a house
DOM = The actual house you can walk through and modify
JavaScript = Your tools to renovate the house
Key Concepts:
1. DOM Tree Structure
The DOM organizes your webpage like a family tree:
document (root)
├── html
├── head
│ ├── title
│ └── meta
└── body
├── h1
├── p
└── div
├── span
└── img
Important Terms:
Parent Node: The element that contains other elements
Child Node: Elements inside a parent element
Sibling Nodes: Elements at the same level (same parent)
Root Node: The top element (document)
2. Browser Rendering Process
Step-by-Step:
1. Browser downloads HTML file
2. Browser creates DOM tree from HTML
3. Browser applies CSS styles
4. Browser runs JavaScript (which can modify DOM)
5. Browser displays the final webpage
3. Developer Tools for DOM Inspection
How to Open Dev Tools:
Windows/Linux: F12 or Ctrl+Shift+I
Mac: Cmd+Option+I
What you can do:
Elements Tab: See the DOM tree structure
Console Tab: Run JavaScript commands
Right-click + Inspect: Jump to specific element in DOM
📖 Section 1.2: DOM Node Types
The 5 Main Node Types (Remember: "DETCA")
1. Document Node (Type 9)
What it is: The entire webpage
Think of it as: The main container holding everything
Example: document
2. Element Nodes (Type 1)
What it is: HTML tags like <p>, <div>, <h1>
Think of it as: The building blocks of your webpage
Example: <p>, <div>, <span>
3. Text Nodes (Type 3)
What it is: The actual words/content you see
Think of it as: The text inside the building blocks
Example: "Hello World" in <p>Hello World</p>
4. Comment Nodes (Type 8)
What it is: Hidden notes in your HTML
Think of it as: Sticky notes for developers
Example: <!-- This is a comment -->
5. Attribute Nodes (Type 2)
What it is: Extra information about elements
Think of it as: Name tags or labels on elements
Example: id="myDiv", class="highlight"
Quick Reference Table:
Node Number Example nodeValue
Type
Document 9 document null
Element 1 <p> null
Text 3 "Hello" "Hello"
Comment 8 <!-- hi --> "hi"
Attribute 2 id="test" "test"
📖 Section 1.3: Basic DOM Properties
The document Object
What it is: Your main remote control for the webpage.
Essential Properties:
javascript
[Link] // Gets/sets page title
[Link] // Gets current page URL
[Link] // Gets the <body> element
[Link] // Gets the <head> element
Essential Methods:
javascript
[Link]() // Find first matching element
[Link]() // Find all matching elements
[Link]() // Find element by ID
[Link]() // Create new element
innerHTML vs textContent
The Golden Rule:
Use textContent for safety (just text)
Use innerHTML for power (text + HTML tags)
textContent
javascript
[Link] = "Just plain text";
// Safe - won't break your page
// Gets/sets only the text content
innerHTML
javascript
[Link] = "Text with <strong>HTML tags</strong>";
// Powerful - can add HTML formatting
// Can break your page if used incorrectly
Example:
html
<p id="demo">Hello <strong>World</strong>!</p>
javascript
const p = [Link]('demo');
[Link]([Link]); // "Hello World!"
[Link]([Link]); // "Hello <strong>World</strong>!"
Node Properties: The Big Three
1. nodeName
What it tells you: The tag name
Format: Always UPPERCASE
Examples: "P", "DIV", "H1", "#text", "#document"
2. nodeType
What it tells you: What kind of node it is
Format: A number
Examples: 1 (element), 3 (text), 8 (comment), 9 (document)
3. nodeValue
What it tells you: The actual content
For elements: Always null
For text: The actual text content
For comments: The comment text
Example:
javascript
const paragraph = [Link]('p');
[Link]([Link]); // "P"
[Link]([Link]); // 1
[Link]([Link]); // null
const textNode = [Link];
[Link]([Link]); // "#text"
[Link]([Link]); // 3
[Link]([Link]); // "Hello World!"
🛠️ Practical Exercises
Exercise 1: Inspect DOM Structure
Goal: Get comfortable with browser developer tools
Steps:
1. Open any website (try [Link])
2. Press F12 to open developer tools
3. Go to Elements tab
4. Click the arrow icons to expand/collapse elements
5. Right-click on text and choose "Inspect"
What to look for:
How HTML tags create the structure
How text appears as separate nodes
How attributes appear in the tags
Exercise 2: Identify Node Types
Goal: Practice recognizing different node types
Create this HTML file:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Practice</title>
</head>
<body>
<!-- This is a comment -->
<h1 id="main-title" class="header">Welcome</h1>
<p>This is a paragraph with <strong>bold text</strong>.</p>
<div>
<span>Nested content here</span>
</div>
<script>
// Your practice code goes here
</script>
</body>
</html>
In the console, try:
javascript
// Find different node types
[Link]([Link]); // 9 (document)
[Link]([Link]); // 1 (element)
[Link]([Link]('h1').nodeType); // 1 (element)
[Link]([Link]('p').[Link]); // 3 (text)
Exercise 3: Explore document Object
Goal: Learn the document object properties
In any webpage console, try:
javascript
// Basic document properties
[Link]("Title:", [Link]);
[Link]("URL:", [Link]);
[Link]("Last modified:", [Link]);
// Count elements
[Link]("Number of links:", [Link]);
[Link]("Number of images:", [Link]);
[Link]("Number of forms:", [Link]);
// Change the title
[Link] = "I changed this!";
// Find elements
[Link]("First paragraph:", [Link]('p'));
[Link]("All paragraphs:", [Link]('p'));
🧠 Memory Aids
Remember Node Types: "DETCA"
Document (9)
Element (1)
Text (3)
Comment (8)
Attribute (2)
Remember innerHTML vs textContent:
textContent = Text only (safe)
innerHTML = Includes HTML (powerful)
Remember the Big Three Properties:
Name (nodeName) - What's your tag name?
Type (nodeType) - What kind are you?
Value (nodeValue) - What's your content?
❓ Self-Check Questions
Basic Understanding:
1. What is the DOM?
2. What are the 5 main node types?
3. What's the difference between innerHTML and textContent?
Practical Application:
4. If you have <p>Hello</p>, what is the nodeType of the <p> element?
5. What would [Link] return for a <div> element?
6. How would you change a webpage's title using JavaScript?
Critical Thinking:
7. Why do you think element nodes have nodeValue = null?
8. When would you use innerHTML instead of textContent?
9. What could go wrong if you use innerHTML with user input?
🎯 Assessment Preparation
Quiz Topics You Should Know:
Definition of DOM
All 5 node types and their numbers
Difference between innerHTML and textContent
What document object is used for
Parent/child/sibling relationships in DOM tree
The three node properties (nodeName, nodeType, nodeValue)
Practical Skills You Should Have:
Open browser developer tools
Navigate the Elements tab
Use console to run JavaScript commands
Identify node types in real HTML
Change page title using [Link]
Find elements using querySelector
📝 Study Tips
For Visual Learners:
Draw DOM tree structures on paper
Use browser dev tools extensively
Color-code different node types
For Hands-On Learners:
Type every code example yourself
Experiment with different websites
Break things on purpose (in a safe environment)
For Reading/Writing Learners:
Write out definitions in your own words
Create flashcards for node types and properties
Summarize each section after reading
🚀 Next Steps
After mastering Module 1, you'll be ready for:
Module 2: DOM Selection Methods (finding specific elements)
Module 3: DOM Manipulation (changing content and structure)
Key foundation you've built:
Understanding of DOM structure
Knowledge of node types
Basic property usage
Developer tools familiarity
💡 Pro Tips
1. Practice on real websites - Don't just read, experiment!
2. Use [Link]() liberally - See what your code is doing
3. Don't memorize numbers - Focus on understanding concepts
4. Break things safely - Learning from mistakes is powerful
5. Ask "why" - Understanding beats memorization
Remember: The DOM is just a way for JavaScript to see and modify web pages. Once you
understand this foundation, everything else builds naturally on top of it!
