promisify-dom-selector

Promisify any DOM selector so that it returns a promise which resolves when the element appears in the DOM. If the element is already present, it will resolve immediately.

Install

npm install promisify-dom-selector
// or
yarn add promisify-dom-selector

Usage

const promisifyDOMSelector = require('promisify-dom-selector')
 
// works also with querySelector, querySelectorAll, getElementsByClassName and so on..
const pGetElementById = promisifyDOMSelector(document.getElementById)
 
pGetElementById('loaded-later')
  .then((el) => {
    // ...
  })
 
// or you can use it with async/await
async () => {
  const asyncLoadedEl = await pGetElementById('loaded-later')
  // ...
}

API

promisifyDomSelector(selector, [context])

selector

Type: Function

The selector you want to promisify, available options are: getElementById, querySelector, querySelectorAll, getElementsByClassName, getElementsByTagName, getElementsByName.

context

Type: Object
Default: document

The context from which the selector method will be called, if specified it will watch for changes only that container and apply the selector method to that container.

NOTE: you can't use a custom context with getElementById and getElementsByName since those can be called only within the document context.

FAQ

Is it safe to use it in production?

Yes it is. This library uses Mutation Observers which are supported by default in every modern browser:

License

MIT © Marco Fugaro