poor man's dom selection

100%

poor man's dom selection

✓ Published0🌍 Public

Last edited Feb 23, 2015

Created on Feb 23, 2015

This example demonstrates a lightweight DOM selection utility that queries elements and normalizes the result into an array. It shows how `querySelectorAll` returns a `NodeList`, which the code converts using `[].slice.call` when multiple matches exist, while preserving a single element as-is. The `find` function accepts an optional scope parameter to limit the search, defaulting to the global `document`. This plain JavaScript approach avoids external libraries, offering a simple alternative to jQuery-style selectors for projects that need minimal dependency overhead.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist a9a28ae7918d9806bc45f4b440a0bca6

This example demonstrates a practical vanilla JavaScript replacement for jQuery’s `index()` and `eq()` methods, showing how to locate an element’s position among its siblings and select a specific node by index. The code uses `document.querySelectorAll('.class')` to fetch all elements with that class, then sets the text content of the first matching element to `1254` via `[0].textContent`, mirroring `eq(0)`. It also defines a helper function, `getNodeindex`, that spreads `elm.parentNode.children` into an array and calls `indexOf(elm)` to return the element’s zero-based index, replicating `index()`. The example highlights modern DOM traversal techniques without external libraries.

KKopylovVitalik

61% match

Loading thumbnail…

TITLE GOES HERE

This example demonstrates how to select and manipulate elements in an HTML document using the Document Object Model (DOM) API. It shows a basic page with paragraphs and list items, highlighting retrieval of elements by ID, tag name, and class name, as well as accessing the text content of a selected element. The code uses standard JavaScript methods like `getElementById`, `getElementsByTagName`, and `getElementsByClassName` to query and inspect the document structure, running within a React framework and a D3 v5 environment.

TTimothyMiage

60% match

Loading thumbnail…

basic DOM Ready

This example demonstrates a lightweight DOM-ready utility that detects when the document is fully loaded and executes registered callback functions. It handles browser-specific quirks by using `document.addEventListener` for Mozilla and Opera, a `doScroll` check for Internet Explorer, and a stylesheet-counting fallback for Safari. The code exposes a `DomReady.ready` method to queue functions, running them immediately if the DOM is already ready or deferring them otherwise. A final fallback ensures `window.onload` triggers the pending callbacks.

Aalessioalex

59% match

Loading thumbnail…

dom manupulation

This example demonstrates the simplest possible DOM manipulation with D3 version 7, rendering the text “Hello D3 version 7” in the center of a web page. It uses the `select` function from the D3 library to target the `<body>` element and the `.text()` method to set its content. The page loads D3 from a CDN via a script tag, and the code runs from a separate bundled JavaScript file. No data or complex rendering is involved; the focus is purely on showing the basic syntax and setup required to begin using D3.

Hharshinikadiyala

59% match

Loading thumbnail…

minimalist hyperscript

This example demonstrates a minimal JavaScript utility for generating DOM elements through a custom `h` function, which takes a tag name, attribute object, and children array or text content. The code creates elements via `document.createElement`, applies attributes with `setAttribute`, and appends text nodes or nested child elements recursively. It shows a lightweight alternative to larger DOM libraries, relying solely on native browser APIs without external dependencies. The rendering approach is direct and imperative, offering a concise building block for constructing HTML structures in data-driven visualizations or interactive interfaces.

Aallyraza

58% match

Loading thumbnail…

d3-selection

This example shows how d3-selection enables data-driven transformation of the DOM by setting attributes, styles, and properties on selected elements. The code demonstrates method chaining, where operations like `d3.selectAll("p").attr("class", "graf").style("color", "red")` apply multiple changes concisely. It also illustrates the distinction between methods that return the current selection versus new ones, using indentation conventions to reveal shifts in context. The document serves as a reference for the d3-selection module’s API, covering areas such as installing, data joins, and enter/exit selections.

深深度碎片

58% match

Loading thumbnail…

DOMTokenList polyfill for IE < 9; implements element.classList

This example shows a JavaScript polyfill that implements the DOMTokenList API to support the `element.classList` property in Internet Explorer 9 and earlier. The code defines the standard methods `add`, `remove`, `toggle`, `contains`, and `item`, and it also patches native implementations in IE 10/11 and Firefox to accept multiple arguments. It stores class lists internally and updates the element’s `className` attribute or SVG `class` attribute when changes occur. The polyfill uses plain DOM methods like `setAttribute` and array operations such as `splice` and `indexOf`.

Aalessioalex

57% match

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections target and manipulate specific DOM elements, showing the difference between selecting all matching elements versus a filtered subset. It highlights how chained selection methods like `selectAll` and `select` work, along with class and ID selectors, to update text content or append new nodes. The code uses the D3 v3 library, loading it from a CDN, and applies methods such as `select`, `selectAll`, `text`, and `append` to bind data-driven changes to a simple HTML structure containing two divs. No external data source is used; the example relies on static HTML content within the page.

AAlbertFranco

57% match