The Modern JavaScript Tutorial - Part II. Browser Document, Events, Interfaces (Ilya Kantor)（Z-Library）

# The Modern JavaScript Tutorial - Part II: Browser Document, Events, Interfaces ## 【One-Line Pitch】 A practical, hands-on guide to mastering browser-side JavaScript—DOM manipulation, event handling, and UI interfaces—for developers who already know JavaScript basics and want to build interactive web pages with confidence. ## 【Book Arc】 - **Opening (~0%–10%)**: Introduces the browser environment's object models—DOM, CSSOM, and BOM—and explains how the browser parses HTML into a navigable tree structure. Covers fundamental DOM navigation: parent/child/sibling relationships, node collections, and the key distinction between live collections and static arrays. - **Early (~10%–23%)**: Dives into element searching (getElementById, querySelector, getElementsByTagName), the DOM node class hierarchy (EventTarget → Node → Element → HTMLElement), and essential properties like innerHTML, textContent, and hidden. Introduces attribute manipulation, including the important data-* attributes and the dataset property for custom data. - **Early (~23%–32%)**: Covers DOM modification techniques: creating elements, the modern insertion methods (append, prepend, before, after, replaceWith), cloning nodes, and using DocumentFragment for efficient batch operations. Transitions into styling—inline styles via the style property and reading computed styles with getComputedStyle. - **Middle (~32%–42%)**: Explores element geometry in depth: dimensions (offsetWidth/Height, clientWidth/Height), positioning (getBoundingClientRect), and the subtle differences between CSS width/height and actual rendered geometry. Includes practical exercises on coordinate calculations and element positioning. - **Middle (~42%–48%)**: Covers window scrolling and page-level coordinates: scrollBy, scrollTo, scrollIntoView, and pageXOffset/pageYOffset. Includes hands-on tasks like creating positioned tooltips and interactive elements that respond to clicks with precise coordinate tracking. - **Late (~48%+)**: Introduces the event system—how browsers create event objects with details like pointer coordinates and key presses, and how to attach handlers. Begins exploring event propagation, including bubbling and the stopPropagation method for controlling event flow. ## 【Key Takeaways】 - **DOM collections are live and read-only** (Early): Unlike arrays, childNodes and similar collections automatically update when the DOM changes, but you can't modify them directly—use Array.from() when you need array methods, and dedicated DOM methods for changes. - **The DOM node class hierarchy matters** (Early): Understanding that EventTarget → Node → Element → HTMLElement forms the inheritance chain helps predict which properties and methods are available on any given node, from text nodes to specific HTML elements. - **data-* attributes are your safe custom-data solution** (Early): Using dataset for custom attributes avoids conflicts with future HTML standards and provides clean camelCase access—far better than inventing non-standard attributes that might break later. - **Modern insertion methods simplify DOM manipulation** (Early): The append/prepend/before/after/replaceWith family handles both nodes and strings gracefully, replacing older, more verbose approaches and making code more readable. - **DocumentFragment enables efficient batch operations** (Early): When inserting multiple nodes, build them in a fragment first to avoid multiple reflows—insert the fragment once and its children appear as if inserted individually. - **style property vs. getComputedStyle serve different purposes** (Early): The style property only reads/writes inline styles without CSS cascade awareness, while getComputedStyle reveals the actual rendered values after all stylesheets apply—use each appropriately. - **Geometry properties differ from CSS dimensions** (Middle): offsetWidth/Height include borders, clientWidth/Height include padding but exclude scrollbars, and getBoundingClientRect gives viewport-relative coordinates—CSS width/height can be auto or affected by box-sizing, making them unreliable for calculations. - **Event objects carry crucial context** (Middle): When events fire, browsers pass an event object with details like clientX/clientY coordinates and key information—accessing these properties is essential for building interactive features like drag-and-drop or click-position tracking. ## 【Reading Tips】 - **Skim the opening chapters on DOM structure** if you're already comfortable with HTML—focus instead on the subtle points: live collections, nodeName vs. tagName, and the class hierarchy diagram. - **Deep-read the geometry and coordinates sections** (around 32%–42%)—these are the most conceptually tricky parts, with scrollbar considerations and RTL layout differences that trip up many developers. Work through the coordinate calculation exercises carefully. - **Pay special attention to the "why" explanations**—the book excels at explaining not just what properties exist but why they exist (like why left/top duplicate x/y), which prevents confusion in edge cases. - **Complete the hands-on tasks** (marked with "importance" ratings)—tasks like positioning elements near anchors or moving a ball on click are excellent for internalizing the concepts. - **Treat the event system introduction as a foundation**—the later parts of the book (not fully covered in these excerpts) build heavily on understanding event objects and propagation, so master these basics before moving forward. ## 【Coverage Limits】 This guide covers the book's content through approximately the first half, focusing on DOM structure, manipulation, styling, geometry, and the introduction to events. The excerpts do not cover advanced event handling patterns, forms, or the interfaces section in detail. ##