Dom
dom
is a utility JavaScript library for control dom interfaces.
Introduction
Installation
Yarn
yarn add @pluginjs/dom
NPM
npm i @pluginjs/dom
Getting Started
CDN:
Development:
<script src="https://unpkg.com/@pluginjs/dom/dist/dom.js"></script>
Production:
<script src="https://unpkg.com/@pluginjs/dom/dist/dom.min.js"></script>
API
query
Alias: parentNode.querySelector
Parameters
| Name | Type | Description |
|||-|
| selector | String
| CSS selectors |
| parent | HTMLElement
| Default: document
|
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches. |
queryAll
Alias: parentNode.querySelectorAll
Parameters
| Name | Type | Description |
|||-|
| selector | String
| CSS selectors |
| parent | HTMLElement
| Default: document
|
Returns
| Name | Type | Description |
|||-|
| elements | Array<HTMLElement>
| A non-live Array containing one Element object for each element that matches at least one of the specified selectors or an empty Array in case of no matches. |
find
Just like query, but it is Curried.
finds
Just like queryAll, but it is Curried.
remove
Parameters
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
html
Parameters
| Name | Type | Description |
|||-|
| content | String
| html string |
| element | HTMLElement
| container |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| container |
children
Parameters
| Name | Type | Description |
|||-|
| selector | String
| CSS selectors |
| parent | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| elements | Array<HTMLElement>
| a Array which contains all of the child elements that matches the specified set of CSS selectors . |
siblings
Parameters
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
parent
Parameters
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| parentNode |
parseHTML
Support tagged template.
Parameters
| Name | Type | Description |
|||-|
| htmlString | String
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
setData
Parameters
| Name | Type | Description |
|||-|
| key | String
| |
| value | Any
| |
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
getData
Parameters
| Name | Type | Description |
|||-|
| key | String
| |
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
clone
Parameters
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
empty
Parameters
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
prev
Alias: node.previousElementSibling
Parameters
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
next
Alias: node.nextElementSibling
Parameters
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
attr
Parameters
| Name | Type | Description |
|||-|
| args | String | Object
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
removeAttr
Parameters
| Name | Type | Description |
|||-|
| key | String
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
data
Parameters
| Name | Type | Description |
|||-|
| args | String | Object
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
text
Parameters
| Name | Type | Description |
|||-|
| content | String
| textContent |
| element | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| element | HTMLElement
| |
append
Parameters
| Name | Type | Description |
|||-|
| child | HTMLElement
| childNode |
| el | HTMLElement
| parentNode |
Returns
| Name | Type | Description |
|||-|
| el | HTMLElement
| parentNode |
prepend
Parameters
| Name | Type | Description |
|||-|
| child | HTMLElement
| childNode |
| el | HTMLElement
| parentNode |
Returns
| Name | Type | Description |
|||-|
| el | HTMLElement
| parentNode |
insertBefore
Parameters
| Name | Type | Description |
|||-|
| newElement | HTMLElement
| new element |
| el | HTMLElement
| parentNode |
Returns
| Name | Type | Description |
|||-|
| el | HTMLElement
| parentNode |
insertAfter
Parameters
| Name | Type | Description |
|||-|
| newElement | HTMLElement
| new element |
| el | HTMLElement
| parentNode |
Returns
| Name | Type | Description |
|||-|
| el | HTMLElement
| parentNode |
wrap
Parameters
| Name | Type | Description |
|||-|
| wrapElement | HTMLElement
| wrapper |
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| wrapElement | HTMLElement
| wrapper |
wrapInner
Parameters
| Name | Type | Description |
|||-|
| newElement | HTMLElement
| new element |
| wrap | HTMLElement
| wrapper |
Returns
| Name | Type | Description |
|||-|
| wrap | HTMLElement
| wrapper |
wrapAll
Parameters
| Name | Type | Description |
|||-|
| wrapElement | HTMLElement
| wrapper |
| elementList | Array<HTMLElement>
| |
Returns
| Name | Type | Description |
|||-|
| wrapElement | HTMLElement
| wrapper |
unwrap
Parameters
| Name | Type | Description |
|||-|
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| el | HTMLElement
| |
parentWith
Parameters
| Name | Type | Description |
|||-|
| fn | HTMLElement => Boolean
| |
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| el | HTMLElement
| parentNode |
clearData
Parameters
| Name | Type | Description |
|||-|
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| el | HTMLElement
| |
contains
Parameters
| Name | Type | Description |
|||-|
| el | HTMLElement
| |
| parent | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| bool | Boolean
| |
closest
Parameters
| Name | Type | Description |
|||-|
| selector | String
| |
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| parentElement | HTMLElement
| |
nextWith
Parameters
| Name | Type | Description |
|||-|
| fn | HTMLElement => Boolean
| |
| el | HTMLElement
| |
Returns
| Name | Type | Description |
|||-|
| nextElement | HTMLElement
| |
fade
Parameters
| Name | Type | Description |
|||-|
| type | String
| |
| Options | { duration: Number, callback: Function }
| |
| element | HTMLElement
|
Returns
| Name | Type | Description |
|||-|
| nextElement | HTMLElement
| |
fadeOut
Parameters
| Name | Type | Description |
|||-|
| Options | { duration: Number, callback: Function }
| |
| element | HTMLElement
|
Returns
| Name | Type | Description |
|||-|
| nextElement | HTMLElement
| |
fadeIn
Parameters
| Name | Type | Description |
|||-|
| Options | { duration: Number, callback: Function }
| |
| element | HTMLElement
|
Returns
| Name | Type | Description |
|||-|
| nextElement | HTMLElement
| |
Browser support
Tested on all major browsers.
IE / Edge | Firefox | Chrome | Safari | Opera |
---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
License
@pluginjs/dom is Licensed under the GPL-v3 license.
If you want to use @pluginjs/dom project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.
For purchase an Commercial License, contact us purchase@thecreation.co.
Copyright
Copyright (C) 2022 Creation Studio Limited.