3.3 summary

4. The Browser, HTML, and the DOM

The Blueprint Analogy

• HTML is the blueprint (like a class in Java). It is static text.
• The DOM is the live instance in memory (like an object instance). The browser parses the HTML blueprint and instantiates live C++ DOM node objects in memory.

The DOM Interface & Nodes

• The DOM (Document Object Model) is a tree structure representing the document currently loaded in a browser tab.
• Nodes: Every entry in the tree is a Node. The Node interface is an abstract base class (Document, Element, Text, Comment).
• Node Types: Elements (ELEMENT_NODE = 1), Attributes (2), Text (3), Comments (8), Document (9).

Selectors & Combinators

Selectors (Targeting Elements)

• ID (#id): Targets a unique element.
• Class (.class): Targets elements sharing a class.
• Type (tag): Targets all elements of a specific tag (e.g., p, div).
• Attribute ([attr="val"]): Targets elements based on attributes.

Combinators (Defining Relationships)

1. Descendant ( - Space): Matches elements anywhere inside an ancestor (div p).
2. Child (>): Matches only direct children (ul > li).
3. Adjacent Sibling (+): Matches the immediate next sibling (h1 + p).
4. General Sibling (~): Matches all sibling elements appearing after (h1 ~ p).