spatie-dom
A small DOM querying and manipulation library.
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
Install
You can install the package via yarn:
yarn add spatie-dom
Usage
Querying the DOM
The DOM can be queried with query
and queryAll
, which are wrappers around querySelector
and querySelectorAll
.
Querying an element in document
:
const app = ; // Returns a `HTMLElement`
Querying a collection of elements:
queryAll
returns a plain array instead of the usualNodeList
collection
const articles = ; // Returns an array `Array<HTMLElement>`
query
and queryAll
also accept a scope as their second argument (by default, the scope is document
).
Header
const main = ; // Returns a `HTMLElement`const header = ; // Also returns a `HTMLElement`
Retrieving 'props'
Props are DOM attributes that exist to be consumed by scripts. Props behave just like attributes, except they get parsed as JSON if prefixed by a :
.
This syntax is heavily based on what Vue uses for component props
; const el = ; ; // 'foo'; // { url: 'bar' } ; // { myProp: 'foo', config: { url: 'bar' }}
Firing events based on the DOM state
The whenReady
function calls a function:
- immediately if the DOM is loaded;
- otherwise after the
document
DOMContentLoaded
event
; ;
The whenLoaded
function calls a function:
- immediately if the DOM and all subresources (scripts, images,...) are loaded;
- otherwise after the
window
load
event
; ;
Reading the DOM
There are several functions to read data from the dom.
With attribute
you can retrieve an attribute, and with data
you can retrieve a data attribute.
; const el = ; // Retrieve an attribute; // 'element' // Retrieve an attribute with a fallback value; // 'active' // Retrieve a data attribute; // 'bar' // Retrieve a data attribute with a fallback value; // 'qux'
Full API
Attribute
Data
On
Props
; ;
Query
;; ;;
When
Change log
Please see CHANGELOG for more information what has changed recently.
Testing
$ npm run test
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please contact Sebastian De Deyne instead of using the issue tracker.
Credits
About Spatie
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
License
The MIT License (MIT). Please see License File for more information.