mdn/dom-examples

Features

• API Reference Demos - Serves as a comprehensive reference library of interactive samples demonstrating how to implement various Web APIs.
• DOM Manipulation - Provides a comprehensive set of examples for programmatically updating the document object model.
• Web Hardware APIs - Connects browser scripts to physical hardware using standardized APIs for Bluetooth, USB, and sensors.
• Message Channel Ports - Shows how to create pairs of ports for secure messaging between pages and iframes.
• DOM Manipulators - Provides practical JavaScript snippets for programmatically modifying the structure and content of the browser DOM.
• Drag State Monitors - Provides event-driven monitoring of when items move, enter, leave, or drop on targets during drag operations.
• Drag and Drop Interfaces - Implements a comprehensive system for selecting and moving elements to designated target elements via drag-and-drop.
• Drop Target Configuration - Implements the capability to configure specific elements to accept dragged items by intercepting drag-over events.
• Asynchronous Resource Fetching - Demonstrates requesting data from servers asynchronously to update page content without reloading.
• Shadow DOM Encapsulation - Illustrates how to use shadow DOM to create reusable custom elements with isolated styles.
• Cross-Context Communication - Implements mechanisms for exchanging data and coordinating tasks between different browser script execution contexts.
• Web Components - Provides a detailed reference and code samples for building reusable custom elements using shadow DOM structures.
• Advanced CSS Styling - Provides implementation guides and runnable examples for advanced CSS layout patterns, custom functions, and painting APIs.
• Media Capture and Playback - Implements systems for capturing and managing audio and video streams directly from the browser.
• GPU Accelerated Rendering - Utilizes GPU acceleration to render high-performance 2D and 3D visuals via the canvas API.
• Real-Time Pixel Manipulation - Demonstrates manipulating raw pixel data from live video streams using a canvas for real-time effects.
• Device Posture Detection - Provides demonstrations for detecting foldable screen postures to create adaptive layouts.
• Browser Sensor Monitoring - Implements hooks for tracking real-time data from browser-accessible sensors like accelerometers and gyroscopes.
• Web Hardware Interfaces - Provides implementation guides for communicating with Bluetooth, USB, and NFC devices via the browser.
• Security and Access Control - Implements security patterns for user authentication, encrypted credentials, and the use of trusted types to prevent injection.
• Application Performance Optimization - Includes examples for profiling execution speed and scheduling background tasks to optimize application responsiveness.
• JavaScript Worker Threads - Implements JavaScript worker threads to move heavy computations off the main user interface thread.
• Always-on-Top Browser Windows - Implements browser windows that remain visible above other tabs or applications for persistent content display.
• Color Value Calculations - Provides custom CSS functions to calculate semi-transparent, lighter, or darker versions of colors.
• CSS Custom Functions - Implements custom CSS functions to calculate typed units and synchronize property values across elements.
• CSS Progress Indicators - Demonstrates visual representations of completion status using native CSS progress functions.
• CSS Value Synchronization - Implements a method to synchronize multiple CSS properties from a shared value across different viewport sizes.
• Event-Driven User Interactions - Demonstrates linking browser interface events to application logic for immediate state updates.
• Gradient Functions - Implements reusable CSS functions to encapsulate complex background gradient logic for consistent application.
• Input Event Tracking - Implements a system to monitor pointer events, touch gestures, keyboard input, and gamepad state.
• Non-Primary Mouse Click Handling - Provides a system to detect and handle interactions from non-primary pointing device buttons.
• Document Detachment - Provides a feature to display an arbitrary HTML document in a floating, always-on-top window.
• Picture-in-Picture Styling - Implements specific CSS rules applied to elements when they are displayed within a picture-in-picture floating window.
• Programmatic Background Image Generation - Implements a worklet-based system to generate complex background images that respond to computed style changes.
• Hardware Integration Samples - Offers a comprehensive set of educational samples for integrating various device hardware components through web interfaces.
• Progress Ratio Computations - Provides a method for calculating normalized values between thresholds to drive UI animations and layout changes.
• JavaScript Media Query Evaluation - Provides examples of executing media query checks within JavaScript to trigger conditional logic based on device characteristics.
• Responsive Layout Styling - Provides examples of assigning different CSS values for narrow and wide layouts to handle conditional styling.
• Text Highlighting - Demonstrates a system for rendering custom background highlights on text using CSS properties.
• Background Processing Workers - Provides utilities for offloading intensive tasks to background workers to maintain UI responsiveness.
• CSS Property Support Testers - Implements mechanisms to evaluate browser support for specific CSS properties using native rules and JavaScript.
• Typed CSS Arithmetic - Provides a system for performing arithmetic operations on typed CSS units and unitless numbers.
• Browser Interaction Controls - Provides a mechanism to block standard browser behaviors, such as link opening, during non-primary mouse interactions.

Star history