Skip to content

References: DOM Controls, Input Fields & UI Elements

  1. Document Object Model - Wikipedia - Comprehensive architecture of the hierarchical HTML DOM tree, node manipulation, attribute binding, and programmatic document interfaces in web browsers for interactive applications.

  2. Graphical user interface - Wikipedia - Evolution and principles of graphical user interface widgets (buttons, sliders, inputs, dropdowns) for controlling application parameters interactively in real-time software systems.

  3. Two-way data binding - Wikipedia - Software pattern synchronizing internal application state variables with external visual UI form controls. Crucial for parameter-driven generative artwork and simulation controls.

  4. JavaScript: The Definitive Guide (Seventh Edition) - David Flanagan - O'Reilly Media - Flanagan wrote the definitive reference on the DOM tree, explaining event bubbling, node creation, and dynamic attribute mutation with unmatched clarity for web engineers.

  5. Designing Interfaces: Patterns for Effective Interaction Design (Third Edition) - Jenifer Tidwell, Charles Brewer, and Aynne Valencia - O'Reilly Media - Tidwell and co-authors established canonical UI component patterns (sliders for continuous ranges, toggles for boolean states) that guide creative coding tool interfaces and dashboards.

  6. p5.dom Reference and Element Creation - p5.js Foundation - Complete API reference guide for createButton(), createSlider(), createInput(), createSelect(), createColorPicker(), and parent() element anchoring in p5.js sketches for interactive user interfaces and custom widgets.

  7. The Coding Train: DOM Elements in p5.js - The Coding Train - Visual video playlist demonstrating how to connect HTML sliders and buttons to p5.js sketch variables to build real-time interactive parameter controls and tools.

  8. MDN Web Docs: Working with HTML Form Controls - MDN Web Docs - Detailed guide on standard HTML input types (range, text, checkbox, radio, color), their change events, and value extraction properties in web browsers.

  9. Manipulating Documents and the DOM - MDN Web Docs - Practical introduction to selecting DOM nodes, appending child elements, listening to input events, and managing dynamic page content via JavaScript APIs and events.

  10. dat.GUI / lil-gui Lightweight UI Controllers - lil-gui Documentation - Interactive documentation and visual examples of floating GUI control panels used by creative coders to tweak simulation parameters in real time.