SE324Week6DOMProgramming

Summary of the Subtitles (DOM Programming Lecture)

Lecture purpose / resources

• The instructor explains that the current recording covers only a small portion of the planned DOM programming material due to time constraints.
• A full, 1+ hour DOM programming lecture is referenced on YouTube for deeper coverage.
• Today’s focus is on exam-relevant overview concepts, including:
  • a walkthrough of how the DOM interacts with JavaScript
  • a sample project later in the lecture

---

Project / starting setup (Week 6)

• Creates a Week 6 folder containing:
  • index.html
  • scripts/
  • scripts/script.js
• In index.html, builds a basic DOM structure including:
  • a title
  • an h1, p, and an ol list
• Attaches the script near the end of the <body> using: ```html

```

---

Review of JavaScript foundation: the window object

• Notes that many JavaScript functions are available through the window object (representing the browser).
• Example:
  • window.alert("...")
  • alert("...") works without writing window explicitly.

---

DOM programming definition (API concept)

• Introduces DOM programming as working with the DOM (Document Object Model)—a programming interface/API.
• DOM enables communication between HTML/CSS and JavaScript:
  • JavaScript can read
  • JavaScript can dynamically update the document’s structure and style
• Analogy/definition:
  • When a page loads, it becomes a DOM tree stored in browser memory.

---

DOM tree and node types

• Explains that the HTML is represented as an upside-down tree in memory.
• document is treated as the top/root entry used to access the loaded page.
• Breaks down DOM nodes into:
  1. Element nodes (e.g., div, p, time)
  2. Text nodes (the text inside elements, not the element itself)
  3. Attribute nodes (e.g., src, href, alt)

---

“Family relationships” in the DOM

• Covers common DOM relationships for nodes/elements:
  • first child / last child
  • next sibling / previous sibling
  • parent / child
• Mentions related ideas:
  • node type / node value

---

Practical DOM usage: document in DevTools

• Demonstrates in the browser console that:
  • document represents the currently loaded HTML document
  • document.title can be read and temporarily modified
• Clarifies:
  • changes are not permanent—they disappear after refresh (DOM updates in memory)

---

Accessing “generic” info from a page

• Demonstrates common DOM properties/accessors such as:
  • document.title
  • document.body
• Also references the concept of using document to access counts (e.g., number of images/links) via page properties/methods.

---

Accessing “specific” elements with IDs

• Key method introduced:
  • document.getElementById("...")

• Typical workflow:

  1. Give an element an id in HTML (e.g., h1 id="top")

  2. Retrieve it in JS: js const h1 = document.getElementById("top");

  3. Manipulate the element or attach behavior to it.

---

Event handling: click + function execution

• Attaches a click event listener to an element (the h1).
• On click:
  • a function runs (initially shows an alert as a demonstration)
  • then the lecture updates a paragraph’s text using another element with an id (e.g., p id="p1")
  • uses a property like innerText to replace the paragraph content (e.g., changing “This is a paragraph” to new text)

---

Dynamic updates (timers / real-time behavior)

• Explains that “live” websites (e.g., stock tickers) update the DOM by:
  • repeatedly fetching new data
  • updating the DOM tree accordingly
• Mentions timer functions for repeated execution/checking.

---

Creating new elements dynamically

• Demonstrates creating and inserting a new DOM node when clicking:

  • document.createElement("p")

  • set text via: js newP.innerText = "...";

  • insert into the document using:

    • appendChild on a target container (example conceptually: document.body.appendChild(newP))

---

Changing image source dynamically

• Demonstrates:
  • add an id to an <img> (e.g., id="pickOne")
  • on click of a trigger (h1), update the image:
    • conceptually: imgElement.src = "images/car2.jpg"
• Emphasizes:
  • id matters not only for styling, but specifically for grabbing elements in JavaScript

---

Inserting elements inside a specific container (not always body)

• Notes that placement depends on where you append:
  • appending to document.body places it at the bottom
  • appending to a specific div (e.g., id="output") places it inside that div
• Example concept: js const output = document.getElementById("output"); output.appendChild(newP2);

---

Reminder: multiple methods exist for selection

• Mentions alternative selection approaches such as:
  • getElementsByTagName
• Warns:
  • selecting by tag can be ambiguous if multiple tags match
• References for later learning:
  • querySelector / querySelectorAll

---

Common mistake: placing scripts in <head> too early

• Describes a student issue:
  • script placed in head, but element IDs weren’t available yet when the script ran
• Explanation:
  • the head is parsed/executed first, so JS may run before DOM elements “exist”

• Fix/rule-of-thumb:

  • use: js window.addEventListener("DOMContentLoaded", ...)

  • described as acting like a “main function” gate so code runs only after DOM content loads

  • Interview-style takeaway:
  • script placement (head vs body) can matter unless you use DOMContentLoaded.

---

Demo project shown (library / book management)

• Mentions a larger “library project” that demonstrates:
  • adding books
  • showing “book successfully added”
  • removing books with “book successfully removed”
  • using popups/timers for UI behavior
• Overall behavior implies reliance on:
  • DOM manipulation
  • event listeners
  • timer-based effects

---

Main speakers / sources

• Speaker: Dr. Ahmed (primary lecturer referenced throughout; also mentioned near the end)
• Academic standards/source referenced: W3C (cited conceptually as the formal DOM definition)