This package has been moved to @jsfns/web and is no longer maintained in this repository.
Vanilla JS Browser helpers
This is a collection of simple, no dependency, vanilla JS snippets with the aim of making it easier to work with vanilla JS.
They is written in ES6, since most of the major browsers support this syntax,
all scripts have however been converted into the Echma Script 5 syntax (without
polyfills) and stored in the ./es5 folder if needed.
Polyfills haven't been included as they exist in abundance on NPM, and since the need for polyfills are ever diminishing it is more future proof and clutter free to leave them out.
GENERAL HELPERS
These helpers are browser specific, for more general helpers check out: vanillajs-helpers
Documentation
Documentation is written in the Wiki of the GitHub repository, but here below is an overview of the helpers available.
Helpers
| Method | Description |
|---|---|
| addClass | Add class to a DOM element |
| after | Insert HTML or ad DOM element after a DOM element |
| append | Insert HTML or ad DOM element into the end of a DOM element child list |
| attr | Get/set an attribute of a DOM element |
| before | Insert HTML or ad DOM element before a DOM element |
| children | Get the direct child DOM elements of a DOM element |
| create | Creates DOM element from CSS selector |
| css | Get/set styling of a DOM element |
| create | Creates a DOM element from a selector (eg. div#myDiv.some-class) |
| data | Get/set value of a data attribute on a DOM element |
| delegate | Bind delegate event(s) to a DOM element |
| domReady | Bind a handler to the document ready event |
| elmIndex | Get the index of a DOM node amongst its siblings |
| eventPlus | Sophisticated on/off event bindings: - Remove all events - Event name spacing - Delegates |
| find | Find method that detect the most efficient find method depending on the query. Also includes certain wildcards. |
| findByClass | Find DOM elements by class name |
| findById | Find DOM element by ID |
| findByName | Find DOM elements by name attribute |
| findByQuery | Find DOM elements using CSS query |
| findByTagName | Find DOM elements by tag name |
| hasClass | Detect if a DOM element has a given class |
| hidden | Detect if a DOM element is hidden or not |
| inDOM | Detect if a DOM element is inserted into the DOM |
| inView | Detect if a DOM element is in view on the screen |
| invisible | Detect if a DOM element is invisible or not |
| isDOMChildNode | Detect if a DOM element is a child node of another DOM element |
| isDOMContainer | Detect if a DOM node is a can contain child nodes |
| isDocument | Detect if a DOM node is the document node |
| isDOMElement | Detect if a DOM node is a DOM element |
| isDOMFragment | Detect if an object is a document fragment |
| isDOMNode | Detect if a DOM node is actually a DOM node |
| isDOMRoot | Detect if a DOM node is the root element (body in HTML) |
| isWindow | Detect if an Object is a window object |
| matches | Detect if a DOM node match a given CSS selector |
| off | Remove event handler from a DOM element |
| on | Add event handler to a DOM element |
| once | Add a single fire event handler to a DOM element |
| position | Get the position of a DOM element |
| prefixed | Prefixes a name with vendor prefixes (webkit, moz, ms, o) |
| prepend | Insert HTML or ad DOM element into the beginning of a DOM element child list |
| remove | Remove a given DOM element from the DOM |
| removeClass | Remove a given class name from a DOM element |
| replace | Replace a given DOM element with another |
| scrollBy | Scroll page or given DOM element by x number of pixels left/right |
| scrollInfo | Get information about current window or DOM element scroll positions (includes percentage scrolled) |
| scrollParent | Get the current DOM elements scrolling parent |
| scrollTo | Scroll page or given DOM element to given x and y coordinate |
| siblings | Get the siblings of a DOM element |
| size | Get the size of a DOM element |
| supportsCSS | Detects whether the current browser supports a given CSS prop and/or value |
| toDOM | Convert a HTML string into DOM element(s) |
| toggleClass | Toggle a class from a DOM element |
| trigger | Trigger an event handler on a DOM element |
| viewport | Get the current viewport area |
| visible | Detect if a DOM element is visible or not |
Installation
npm install vanillajs-browser-helpers
Usage
// ES 6
import append from 'vanillajs-browser-helpers/append';
append('<div class="child-element"></div>');// ES 5
var append = require('vanillajs-browser-helpers/es5/append').default;
append('<div class="child-element"></div>');Something missing?
If you find any bugs or missing functionality you would like to see included, feel free to add an issue in the issue list or perhaps do a Pull Request of a great snippet you created.
Testing
Check out the Testing docs