promisify-dom-selector
Version:
Promisify any DOM selector so that it returns a promise which resolves when the element appears in the DOM
65 lines (39 loc) • 1.82 kB
Markdown
# promisify-dom-selector [](https://travis-ci.org/marcofugaro/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
```js
npm install promisify-dom-selector
// or
yarn add promisify-dom-selector
```
## Usage
```js
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`<br>
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:
[](http://caniuse.com/#feat=mutationobserver)
## License
MIT © [Marco Fugaro](http://marcofugaro.it)