Javascript.info Ebook Part 2 Browser Document, Events, Interfaces (Ilya Kantor, javascript.info)（Z-Library）

# Javascript.info Ebook Part 2: Browser Document, Events, Interfaces ## 【One-Line Pitch】 A practical, deep-dive reference for JavaScript developers who want to master browser APIs—DOM manipulation, event handling, and interface mechanics—with clear explanations and hands-on examples. Ideal for frontend developers who already know JavaScript basics and want to move from "it works" to "I understand exactly why." ## 【Book Arc】 - **Opening (~0%–10%)**: Introduces the browser environment's object models—DOM, CSSOM, and BOM—explaining how they differ and work together. Covers the DOM tree structure, node types, and the class hierarchy (EventTarget → Node → Element → HTMLElement), including the surprising auto-insertion of `<tbody>` in tables. - **Early (~10%–23%)**: Dives into DOM manipulation fundamentals: reading and modifying `innerHTML`, working with attributes and properties, using `data-*` attributes for custom data, and creating/inserting elements with methods like `appendChild`, `insertAdjacentHTML`, and the modern `append`/`prepend`/`before`/`after` family. Also covers `document.write` and its caveats. - **Early (~23%–32%)**: Explores element styling and geometry—how to read and modify inline styles, the limitations of `elem.style` (it can't see CSS class styles), and the full suite of geometry properties: `offsetWidth/Height`, `clientTop/Left`, `scrollTop/scrollHeight`, and `getBoundingClientRect()`. Emphasizes the scrollbar's impact on measurements and why `clientWidth` beats `window.innerWidth` for layout calculations. - **Middle (~32%–42%)**: Covers coordinate systems—window coordinates vs. document coordinates—and when to use each with `position:fixed` vs. `position:absolute`. Introduces event handling basics: HTML attributes (`onclick`), DOM properties, and `addEventListener`/`removeEventListener`, including the critical gotcha that removing a handler requires the exact same function reference. - **Middle (~42%–48%)**: Explains event propagation—bubbling and capturing phases—with the analogy of local authorities reacting before higher levels. Introduces `event.stopPropagation()` and the foundation for event delegation, a powerful pattern for handling events on many elements efficiently. ## 【Key Takeaways】 - **DOM, CSSOM, and BOM are three distinct object models** (Early): The DOM handles document structure, CSSOM handles styles (rarely needed in practice), and BOM handles browser-level objects like `navigator`, `location`, and `alert`/`confirm`/`prompt`. Understanding which model you're working with prevents confusion about what's available. - **DOM nodes follow a strict class hierarchy** (Early): EventTarget → Node → Element → HTMLElement → specific element classes like `HTMLInputElement`. Each level adds capabilities—tree navigation, element searching, and tag-specific properties—so knowing the hierarchy helps you predict what methods and properties are available. - **`innerHTML` is powerful but has sharp edges** (Early): It can read and replace HTML content, and the browser auto-corrects invalid markup. However, scripts inserted via `innerHTML` don't execute, and using `innerHTML +=` performs a full overwrite, which can be inefficient and destructive. - **`data-*` attributes are the safe way to store custom data** (Early): Standard attributes map to DOM properties automatically, but non-standard ones don't. The `data-*` prefix is reserved for developers, accessible via the `dataset` property with camelCase conversion (e.g., `data-order-state` → `dataset.orderState`). - **Geometry properties are zero for hidden elements** (Early): `offsetWidth`, `offsetHeight`, and `offsetParent` return 0/null for elements with `display:none` or those not yet in the document. This gives you a simple way to check visibility, but beware—zero-size elements on screen also return 0. - **`scrollTop`/`scrollLeft` are the only writable geometry properties** (Early): You can programmatically scroll elements by setting these values, including using `0` or `Infinity` to jump to top or bottom. All other geometry properties are read-only. - **Event handler removal requires the exact same function** (Middle): `removeEventListener` won't work with an anonymous function that merely looks identical to the original. Store the handler in a variable if you might need to remove it later—there's no way to "read back" registered handlers. - **Event delegation leverages bubbling for efficiency** (Middle): Instead of attaching handlers to many child elements, attach one to a common ancestor and use `event.target` to determine which element was clicked. This is the foundation for handling dynamic content and large lists. ## 【Reading Tips】 - **Skim the CSSOM section** (Early): The book itself notes CSSOM is rarely needed in practice. Focus your energy on DOM manipulation and event handling instead. - **Deep-read the geometry chapter** (Early): This is where many developers get confused. Pay special attention to the scrollbar's effect on measurements and the difference between `clientWidth` and `window.innerWidth`—these details matter for real layout work. - **Practice the insertion methods side-by-side** (Early): The differences between `appendChild`, `insertAdjacentHTML`, and the `append`/`prepend`/`before`/`after` family are subtle. Write small test pages to see each one in action rather than just reading about them. - **Watch for the "gotcha" callouts** (Throughout): The book highlights common pitfalls—like `innerHTML +=` doing a full overwrite, scripts not executing via `innerHTML`, and the `removeEventListener` function-reference requirement. These are the details that cause bugs in production. - **Work through the tasks at chapter ends** (Throughout): The book includes practical exercises (like finding window coordinates of a field) that cement the concepts. Don't skip them—they're where the learning actually sticks. ## 【Coverage Limits】 This guide covers the first half of the book (approximately 0–48%), focusing on DOM structure, manipulation, styling, geometry, coordinates, and event handling fundamentals. The excerpts do not cover later sections on specific event types (keyboard, mouse, form events), event delegation in depth, or browser interfaces beyond what's mentioned here. ##