basic DOM Ready

100%

basic DOM Ready

✓ Published0🌍 Public

Last edited Nov 18, 2011

Created on Nov 18, 2011

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.

AI-generated description

Similar vizzes

Loading thumbnail…

JavaScript Exp

This example presents a minimal web page that checks the integration of JavaScript and CSS within an HTML document. It displays a large, centered "Hello HTML!" message, demonstrating basic styling applied via a CSS class. The code uses vanilla JavaScript to log the Document Object Model (DOM) to the browser console, illustrating how to access and inspect the page structure programmatically. This serves as a bare-bones starting point for web development, with a linked reference to a separate React-based starter project.

Bbeyzadoganay

61% match

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

59% match

Loading thumbnail…

Wait for an element to exist. ES6, Promise, MutationObserver

This example demonstrates a utility for resolving race conditions in web applications by waiting until an element matching a given selector exists in the DOM, then returning a promise that resolves with that element. The code uses native ES6 Promises and the MutationObserver API to monitor the document’s root element for child list and subtree changes. When the target element appears, the observer disconnects and the promise resolves, allowing actions like removing the widget. The accompanying usage example shows how to delete `#someWidget` once it is present.

Aanemochore

59% match

Loading thumbnail…

JS Examples

This is a bare-bones web page that serves as a minimal example of how to use HTML, CSS, and JavaScript together. It contains a single `<script>` tag in the body that calls `console.log(document)` to print the Document object to the browser's console, demonstrating basic DOM access. The page uses no external libraries or frameworks, relying solely on the built-in JavaScript API to inspect the current page structure.

Bbeyzadoganay

58% match

Loading thumbnail…

HTML Starter

This minimal HTML page demonstrates a bare-bones web setup using inline styles, a separate JavaScript file, and the D3 library loaded via CDN. It logs the D3 object to the browser console, verifying that the library has loaded successfully. The example serves as a starting point for building more complex visualizations, showing how to structure an HTML document with linked CSS and JavaScript, while relying on D3 v6 for future data-driven graphics.

Aainhoadieruiz@gmail.com

58% match

Loading thumbnail…

React Starter

This example demonstrates a minimal React setup where a plain-text "Hello World" message is rendered into a DOM element using vanilla JavaScript, while the React library is loaded but its rendering path remains commented out. The code also illustrates JavaScript promises, including a `waitSeconds` function that resolves after a specified delay using `setTimeout`. React 16.10.0 and ReactDOM are loaded via UMD builds from unpkg, with the page structure defined in `index.html`.

Ssignupexx

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

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