DOMTokenList polyfill for IE < 9; implements element.classList

100%

DOMTokenList polyfill for IE < 9; implements element.classList

✓ Published0🌍 Public

Last edited Oct 30, 2015

Created on Oct 22, 2021

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`.

AI-generated description

Similar vizzes

Loading thumbnail…

poor man's dom selection

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.

Aamundo

57% 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

57% match

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

56% match

Loading thumbnail…

Gist 2654204

This example demonstrates how to dynamically swap CSS class names on DOM elements using a jQuery plugin. It shows a reusable `replaceClass` method that leverages the native `String.replace` function, accepting either a regexp or substring as the old class and a string or function as the replacement. The plugin iterates over each matched element via `this.each`, modifying the `class` attribute through jQuery’s `attr` callback. The code relies on jQuery’s core APIs, specifically `$.fn.each` and `$.fn.attr`, to perform the replacement without altering other attributes or event handlers. The data source is the element’s existing class attribute, and the rendering approach is direct DOM manipulation.

Aabernier

53% match

Loading thumbnail…

Cross-browsers events listener implementation

This example shows a cross-browser event listener abstraction that normalizes how JavaScript attaches and removes DOM event handlers. The code defines an `addListener` and `removeListener` pair, then initializes them by detecting the available API at runtime. It uses the standard `window.addEventListener` and `removeEventListener` methods when supported, falls back to Internet Explorer’s `document.attachEvent` and `detachEvent` with an `'on'` prefix, and finally uses direct `el['on' + type]` property assignment for older browsers. The logic is contained in a single self-invoking object that returns itself, ready for use without any external libraries.

Aabernier

53% 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

53% match

Loading thumbnail…

A simple DOM component (for angular and angular-ecs)

This example shows how to wrap raw DOM elements as AngularJS jqLite objects, enabling Angular-ECS components to manipulate them with familiar jQuery-like methods. It detects the browser’s CSS vendor prefix via `window.getComputedStyle` and regular expressions, then uses that prefix to set the `transform` property with `translate3d` for efficient GPU-accelerated positioning. The `Dom` class extends `angular.element`, allowing direct style changes through a custom `setPosition` method, while the prefix detection ensures cross-browser compatibility. The code relies on Angular’s built-in jqLite and demonstrates a lightweight alternative to heavier DOM abstraction libraries.

HHypercubed

52% match

Loading thumbnail…

JavaScript tips

This animated slideshow presents JavaScript coding tips and techniques, covering ES6 modules, destructuring, monkey patching, node.js binary scripts, and animation patterns. The code examples demonstrate practical implementations using TweenMax for timeline-based animations, including a draw/anim pattern and a 1-second reference scaling approach. It also showcases event handling for CSS transitions and transform property detection. The rendering uses code blocks with syntax highlighting, and the animation presents each tip sequentially, with the source gist serving as the data for the displayed content.

Aabernier

52% match