DOM Helpers
Helper functions for faster DOM scripting
Install
yarn add @three11/dom-helpersor
npm i @three11/dom-helpersUsage
import {
$,
$$,
hasClass,
addClass,
removeClass,
toggleClass,
insertAfter,
insertBefore,
dispatchEvent,
enableListeners,
getScrollPosition,
isElementVisibleInViewport
} from '@three11/dom-helpers';or
Import each function separately.
See functions list below:
Functions
$ - queries the DOM and obtains a single element
const button = $('#button');$$ - queries the DOM and obtains a collection of elements
const buttons = $$('#button');enableListeners - enables the custom on method for attaching of event listeners
enableListeners();
button.on('click', () => {
console.log('clicked a single button');
});
buttons.on('click', () => {
console.log('clicked a button in a collection');
});isElementVisibleInViewport - accepts two arguments: DOM element and a boolean flag which states if the element should be partially visible. Returns boolean.
const element = document.getElementById('element');
const isVisible = isElementVisibleInViewport(element, true);-
getScrollPosition- returns the scroll position of the passed DOM Element
const element = document.getElementById('element');
const scrollPosition = getScrollPosition(element);-
hasClass- Returns boolean true if the element has the specified class, false otherwise. -
addClass- Adds the specified class to an element -
removeClass- Removes the specified class from an element -
toggleClass- Toggles the specified class on an element
const element = document.getElementById('element');
hasClass(element, 'test'); // false
addClass(element, 'test');
removeClass(element, 'test');
/**
* The last argument forces the classname.
* If true the classname will be added,
* if false it will be removed.
* If omitted, the classname will be toggled
*/
toggleClass(element, 'test', true);-
insertAfter- Insert the supplied HTML String after the element -
insertBefore- Insert the supplied HTML String before the element
const element = document.getElementById('element');
insertAfter(element, '<div>Test</div>');
insertBefore(element, '<div>Test</div>');-
dispatchEvent- Fires a custom (or built-in) event
const element = document.getElementById('element');
// The third argument is event data. Can be omitted
dispatchEvent(element, 'click', { data: true });License
GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007