Dom
A super lightweight JavaScript Dom manipulator
Installation
NPM
npm i whitecube-dom
Yarn
yarn add whitecube-dom
and then in your code simply import the classes you need:
import { Dom, DomCollection, DomElement } from 'whitecube-dom';Dom
The Dom class aims to give you shortcuts to make your life easier when working with dom elements.
Dom.element(tag, classes = [], attributes = {})→ returns a DomElement instance.
let x = Dom.element('div');
let y = Dom.element('div', ['class-one']);
let z = Dom.element('div', ['class-one', 'class-two'], {
'data-test': 'Hello there'
});DomCollection
The DomCollection class wraps multiple DomElements.
Constructor
new DomCollection(elements = [])Properties
DomCollection.els → An array/nodelist containing the DomElements
Methods
DomCollection.add(el)param {DomElement|HTMLElement} el The element to add
→ returns this
Add an element to the collection.
DomCollection.each(callback, reverse = false)param {callback} callback The code to execute
@param {boolean} reverse Should we loop in reverse
→ returns this
Iterate over each of the DomElements and run code.
DomCollection.on(event, callback)param {string} event The event to listen for
param {callback} callback The code to execute
→ returns this
Add event listeners to all elements of the collection.
DomCollection.off(event, callback)param {string} event The event to stop listening for
param {callback} callback
→ returns this
Remove event listeners from all elements of the collection.
DomCollection.insertInto(parent)param {DomElement|HTMLElement} parent The element to insert into
→ returns this
Insert this collection into an element.
DomCollection.count()→ returns int
Returns the amount of items in the collection.
DomElement
The DomElement class is a container for a single dom element.
Most of the following methods return this to allow method chaining.
Constructor
new DomElement(element = null)Properties
DomElement.tag → the tag name of this element
DomElement.classes → an array containing the classes
DomElement.attributes → an object containing the available attributes
DomElement.el → the underlying HTMLElement
Methods
DomElement.create(tag, classes = [], content = null, attributes = {})→ returns this
Creates a node
DomElement.addClass(className)→ returns this
Adds a class to the element.
DomElement.removeClass(className)→ returns this
Removes a class from the element.
DomElement.hasClass(className)→ returns boolean
Checks if the element has the specified class.
DomElement.setAttribute(attribute, value)param {string} attribute The attribute name
param {mixed} value The value to set the attribute to
→ returns this
Sets an attribute on the element.
DomElement.removeAttribute(attribute)param {string} attribute The attribute name to remove
→ returns this
Removes an attribute from the element.
DomElement.hasAttribure(attribute)param {string} attribute The attribute name to check for
→ returns boolean
Checks if the element has the specified attribute.
DomElement.remove(duration = 0, className = '')param {int} duration The duration after which to remove the element
param {string} className An optional class name to add to the element before removing it
→ returns this
Removes an element from the DOM.
DomElement.insertInto(element)param {HTMLElement|DomElement} element The parent element
→ returns this
Inserts the element into the specified element.
DomElement.appendChild(childNode)param {HTMLElement|DomElement} childNode The child element
→ returns this
Appends a child element to the element.
DomElement.on(event, callback)param {string} event The event to listen for
param {callback} callback The actions to perform
Adds an event listener to this element.
DomElement.off(event, callback)param {string} event The event to stop listening for
param {callback} callback
Removes an event listener.
DomElement.clone(deep = true)param {boolean} deep Should we copy the child nodes as well
→ returns DomElement
Create a copy of this element.
DomElement.qs(selector)param {string} selector Query selector
→ returns DomElement
Finds an child element.
DomElement.qsa(selector)param {string} selector Query selector
→ returns DomCollection
Finds child elements.
DomElement.height()→ returns int
Get the height of the element.
DomElement.width()→ returns int
Get the width of the element.