Endsem Exam Questions: Unit 5
Object Models and DOM Architecture
Q1. Differentiate between the initial JavaScript Object Model and the W3C Standard Document Object Model (DOM).
The initial JavaScript Object Model provided shallow, inflexible access. It exposed a flat collection of specific elements (forms, images) rather than a hierarchical structure. Developers could not traverse arbitrary tags, tightly coupling logic to specific HTML markers.
The W3C Standard DOM defines a language-agnostic interface that models the entire document as a hierarchical tree of Node objects. This structure provides universal traversal. JavaScript navigates parent, child, and sibling relationships programmatically, enabling dynamic mutation of any document sector regardless of static HTML attributes.
Q2. Explain the separation of node creation and insertion within the DOM.
The DOM intentionally separates node creation from DOM insertion to optimize hardware utilization.
Execution of document.createElement() instantiates the node in memory, completely isolated from the live document tree. The developer populates this isolated node. The execution of appendChild() or insertBefore() attaches the fully constructed node to the live tree. This triggers a single browser reflow/repaint cycle. Directly mutating the live tree repeatedly causes catastrophic rendering performance degradation.
Event Handling and Propagation
Q3. Contrast the Netscape Event Capturing model with the Internet Explorer Event Bubbling model.
Propagation defines the trajectory of an event through the DOM hierarchy.
The Netscape Capturing model initiates the event at the root (the window or document) and descends through the ancestors until it strikes the specific target element. Handlers on parent containers execute before the target handler.
The Internet Explorer Bubbling model initiates the event at the exact target element and bubbles upward through the ancestors to the root. The target handler executes first. This fragmentation caused severe cross-browser execution failures prior to standard unification.
Q4. Explain the execution phases of the DOM2 Event Model.
The W3C DOM2 Event Model unifies the legacy architectures into a single, three-phase lifecycle.
- Capturing Phase: The event descends from the root to the target’s parent.
- Target Phase: The event strikes the specific target element.
- Bubbling Phase: The event ascends from the target back to the root.
The addEventListener(event, handler, useCapture) method leverages this cycle. Passing false (default) binds the handler to the Bubbling phase. Passing true binds it to the Capturing phase. It eliminates the basic event model’s flaw of overriding properties, allowing infinite handlers per event.
Q5. Detail the necessity of the preventDefault() and stopPropagation() execution controls.
Events trigger default browser behaviors. Clicking a link initiates navigation; submitting a form triggers a POST/GET reload. event.preventDefault() halts this default consequence, preserving the state of Single Page Applications (SPAs) while allowing the event to continue propagating.
event.stopPropagation() immediately terminates the propagation cycle. The event halts its ascent in the bubbling phase. This isolates interaction logic, preventing unintended parent container handlers from executing and corrupting the interface state.