Detect when an element is ready in the DOM
npm install element-ready> Detect when an element is ready in the DOM
``sh`
npm install element-ready
`js
import elementReady from 'element-ready';
const element = await elementReady('#unicorn');
console.log(element.id);
//=> 'unicorn'
`
Returns a promise for a matching element.
Returns an async iterable which yields with each new matching element. Useful for user-scripts that modify elements when they are added.
`js
import {observeReadyElements} from 'element-ready';
for await (const element of observeReadyElements('#unicorn')) {
console.log(element.id);
//=> 'unicorn'
if (element.id === 'elephant') {
break;
}
}
`
#### selector
Type: string | string[]
Prefix the element type to get a better TypeScript return type. For example, button.my-btn instead of .my-btn.
#### options
Type: object
##### target
Type: Element | document\document
Default:
The element that's expected to contain a match.
##### stopOnDomReady
Type: boolean\true
Default:
Automatically stop checking for the element to be ready after the DOM ready event. The promise is then resolved to undefined.
##### signal
AbortSignal for stopping the search and resolving the promise to undefined.
`js
import elementReady from 'element-ready';
// 5-second delay
const element = await elementReady('.unicorn', {signal: AbortSignal.timeout(5_000)});
`
`js
import elementReady from 'element-ready';
// For additional abort conditions
const controller = new AbortController();
const element = await elementReady('.unicorn', {signal: AbortSignal.any([controller.signal, AbortSignal.timeout(5_000)])});
`
##### waitForChildren
Type: boolean\true
Default:
Since the current document’s HTML is downloaded and parsed gradually, elements may appear in the DOM before _all_ of their children are “ready”.
By default, element-ready guarantees the element and all of its children have been parsed. This is useful if you want to interact with them or if you want to .append() something inside.
By setting this to false, element-ready will resolve the promise as soon as it finds the requested selector, regardless of its content. This is ok if you're just checking if the element exists or if you want to read/change its attributes.
##### predicate
Type: (element: HTMLElement) => boolean\undefined
Default:
A predicate function will be called for each element that matches the selector. If it returns true, the element will be returned.
For example, if the content is dynamic or a selector cannot be specific enough, you could check .textContent of each element and only match the one that has the required text.
`html`
...
...
`js
import elementReady from 'element-ready';
const wantedCountryElement = await elementReady('#country-list li', {
predicate: listItemElement => listItemElement.textContent === 'wanted country'
});
`
- dom-loaded - Check when the DOM is loaded like DOMContentLoaded`