Skip to content

Tokimon/vanillajs-browser-helpers

Repository files navigation

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

About

Vanilla JS helper methods for in browser usage

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages