@three11/dom-helpers

dom-helpers

Helper functions for faster DOM scripting

NOTE:

The latest version in the master branch is different than the latest release on Github and the latest release on NPM. There are major changes and modifications. This version is still a work in progress.

Install

yarn add @three11/dom-helpers

or

npm i @three11/dom-helpers

or

Just download this repository and link the files located in dist folder:

<script src="path-to-dom-helpers/dist/dom-helpers.min.js"></script>

or

Include it from Unpkg CDN

<script src="//unpkg.com/@three11/dom-helpers/dist/dom-helpers.min.js"></script>

Usage

import {
	$,
	$$,
	trigger,
	hasClass,
	addClass,
	removeClass,
	toggleClass,
	insertAfter,
	insertBefore,
	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>');

---

• trigger - Fires a custom (or built-in) event

const element = document.getElementById('element');

// The third argument is event data. Can be omitted
trigger(element, 'click', { data: true })

License

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007