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