Skip to main content

DOM API

Source: Document Object Model (DOM) - Web APIs | MDN

aka DOM, Document-Object-Model

Interface between JS code & HTML document render by Browser

API to contain methods & properties to (programmatically) interact with theDOM Tree

Data to rep structure & content of HTML docs as node & object

DOM Interface​

ObjectInterface to expose portion of DOM API to Programming Language (ie JS)

DOM API not included in Node.js Runtime

The DOM was designed to be independent of any programming languages

DOM API can be accessed by any language including Python

DOM API provides a model to JavaScript for notion of what a Web Page and its components represent

DOM Tree​

Tree-like structure of Node, autogen by HTML document

DOM methods & properties are ordered by node types

DOM Traversal​

(process) to walk through DOM API ; to select Element Node relative to each other

EventTarget​

Top-level Abstract Class Interface extends most objects with ability to receive Events or add Event Listener

window​

Interface to rep Browser. Global Object to access most global properties & methods

References​

  1. DOM Interface ↔ ObjectInterface to expose portion of DOM API to Programming Language (ie JS)

  2. VDOM ↔ Intermediate Abstraction layer between Source Code & DOM API , data structure to mirror DOM API comprised of Fiber (React Element)

  3. Diffing ↔ React HeuristicAlgorithm to reconcile change in state vs view & handle update to DOM

  4. Dirty-Checking ↔ 💪 brute-force approach to detect DOM API changes by check EVERY node at regular intervals

  5. DOM Traversal ↔ (process) to walk through DOM API ; to select Element Node relative to each other

  6. ReactDOM ↔ Renderer for React, to handle DOM updates

  7. jQuery ↔ Lib to simplify DOM API manipulation via $ wrapper around HTML

  8. useLayoutEffect() ↔ Hook variant of useEffect(), to call Effect as soon as DOM API generated BEFORE UI repaints to DOM API

  9. External System ↔ e.g. DOM API element, Global Object, fetch request

  10. Commit Phase ↔ (process) to apply UI change to DOM API (in one Sync shot)

  11. useRef() ↔ Stateful Hook to persist Passive State Variable across renders in FC, as ref handle Escape Hatch to DOM API elements

  12. Uncontrolled Component ↔ Component with state manage by DOM API NOT ReactDOM

  13. Run [Effect](effect) [Sync](sync) before repaint [**_DOM API_**](dom-api) ↔ useLayoutEffect()

  14. render() ↔ replace by createRoot(). ReactDOM API function to render element to DOM API inside container - for Client Component only

  15. findDOMNode() ↔ deprecated ReactDOM API Escape Hatch to access DOM API Node

  16. Mount ↔ (process) to add UI to DOM API

  17. Unmount ↔ (process) to remove UI from DOM API

  18. componentDidMount() ↔ CC Lifecycle Method to trigger when CC Mount to DOM API

  19. componentWillUnmount() ↔ CC Lifecycle Method to trigger when CC Unmount from DOM API

  20. Escape Hatch ↔ (mech) to express logic outside React model - to direct manipulate DOM