Skip to main content
100%

Gist 5bc89f176a762b6fc64a

✓ Published0🌍 Public
Aalessioalex
Last edited Aug 24, 2015
Created on Aug 24, 2015

This example demonstrates the MutationObserver API monitoring changes to a DOM element. The code observes a target node (referenced via `$0`) with a configuration that tracks child list, attribute, and character data mutations across the entire subtree, including old values. When mutations occur, the observer logs each change to the console, grouping observations by a random numeric identifier and printing the target node’s name and mutation type. The visualization relies on browser-native console grouping and logging, with no external data source or rendering library involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist a228815e7f945fd39d1dc914fcc32a43

This example uses A-Frame to demonstrate live observation of an HTML attribute change within a 3D scene. It shows how the `MutationObserver` API logs the `position` attribute of an `a-sphere` element as the code updates it from "0 2.75 -5" to "0 1.75 -5". The observer is configured with `{attributes:true}` to trigger on attribute modifications, printing the changed attribute name, new value, and target node to the console. The code directly interacts with the scene via `AFRAME.scenes[0]` and standard DOM querying.

UUtopiah
74% match
Loading thumbnail…

Gist 44d38c33dc9ab38f123530e4db1c49b8

This example shows a live console log of participant names appearing in a Hub’s presence log, capturing each new addition with a Unix timestamp. A `MutationObserver` watches the DOM node matching `[class^=presence-log]` and, on every child-list mutation, iterates over added nodes to print `Date.now()` and the node’s text content. The code relies solely on the browser’s native `MutationObserver` API, with no external libraries or rendering. It provides a minimal, text-based trace of when users join or appear in the chat, useful for auditing participation over time.

UUtopiah
71% match
Loading thumbnail…

Synopsis

This example shows a DOM element’s CSS style properties being monitored for changes, logging each modification with its old and new values. It demonstrates both a single-property listener and a multi-property change handler. The code uses Backbone.Events for event handling, MutationObserver to detect style attribute mutations, and Underscore for utility functions. The demo binds to `transform-origin` and `border-radius` on a div, then programmatically updates `transform-origin` after one second, triggering the change callbacks.

Aabernier
70% match
Loading thumbnail…

https://jsfiddle.net/developit/q435c6mL/

This example implements a live DOM audit logger that intercepts and records modifications to page elements as they occur. It demonstrates real-time logging of property changes (textContent, innerHTML, className) and node insertions/removals, displaying a formatted trail of each operation with previous and current values. The visualization uses the DOMAuditLogger library, which patches native Element and Node prototype methods to capture events, and renders the audit entries in a scrolling view with color-coded message types.

JJastor11
64% match
Loading thumbnail…

Gist 8420271

This example demonstrates a React-style virtual DOM implementation using the `virtual-dom` library, showcasing a Todo app with animated state updates. The code builds a virtual DOM tree from observable state (via `observ`), renders it to a real DOM element, and uses a diffing algorithm to compute minimal changes between state versions. A requestAnimationFrame loop batches these patches and applies them at 60fps, ensuring smooth UI updates while preserving input focus and other temporary state. The visualization highlights how the virtual DOM approach separates concerns: `h` constructs virtual nodes, `render` creates the initial DOM, `diff` computes changes, and `batch`/`patch` apply them efficiently—all orchestrated with reactive observables and a delegator for events.

Aalessioalex
60% match
Loading thumbnail…

Gist 518525

This example visualizes the JavaScript events bound to elements on a page, showing their frequency and the element types they target. It uses jQuery’s `.data(‘events’)` to inspect registered handlers, then binds a global listener to all those event types via `.bind()` on the `html` element. As events fire, the code increments per-event and aggregate counts, logging each target’s `nodeName` into arrays for later analysis. The underlying data comes from live user interactions on the rendered DOM, providing a real-time snapshot of event activity without any external dataset.

DDylanFM
60% match
Loading thumbnail…

Gist 1866a62d3cb6c066d421a78abd1324e2

This visualization monitors GitHub presence lists by displaying the last four characters of each contributor’s hash in the browser console. It uses a mouseover event listener on presence-list items to extract and log the hash suffix. The code relies on the standard Document Object Model (DOM) API with `querySelectorAll` and `addEventListener`, and does not employ external libraries. The data source is the live presence list rendered by GitHub’s interface, making the example a lightweight, dependency-free tool for observing participant hashes during collaborative sessions.

UUtopiah
59% match
Loading thumbnail…

Gist 734806

This example shows a hierarchical visualization of DOM elements, grouping nodes by their class names and revealing the structure of a web page. It uses a force-directed layout powered by `d3.forceSimulation` to position nodes, with the DOM tree traversed via a custom `walkTheDOM` function that also relies on `getElementsByClassName`. The rendering is done with SVG, where each circle represents a DOM node, and edges link parent and child elements. The data source is the live `document.body` of the current page, so the visualization dynamically reflects the page’s real markup.

Aabernier
58% match