GitHub release GitHub issues GitHub last commit Github file size Build Status npm npm Analytics Greenkeeper badge

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 { $, $$, enableListeners } from '@three11/dom-helpers';

or

Import each function separately.

See functions list below:

Functions

  • $ - queries the DOM and obtains a single element
  • $$ - queries the DOM and obtains a collection of elements
  • enableListeners - enables the custom on method for attaching of event listeners

After you query your element(s) you can use jQuery-like syntax to add event listeners. Example below:

enableListeners();

const button = $('#button');

button.on('click', () => {
    console.log('clicked a single button');
});

const buttons = $$('.button');

buttons.on('click', () => {
    console.log('clicked a button in a collection');
});

License

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007