Vanilla JS utilities for writing powerful web applications without jQuery.

Selecting

Select DOM elements by CSS selector querySelectorAll - a CSS selector method like the one provided by jQuery. jQuery: $(selector), $(selector, context)

Select elements by class name getElementsByClassName - a fast way of selecting DOM elements by class name in modern browsers. Does not work in IE 8 and below. jQuery: $('.foo')

Select elements by tag name getElementsByTagName - a fast and cross browser safe way for selecting DOM elements by tag name, e.g. "div", "a", "span", etc. jQuery: $('div')

Select an element by ID getElementById - a fast and cross browser safe way for selecting DOM elements. jQuery: $('#foo')

Traversing

Match element selector Check the current elements against a CSS selector. jQuery: $.is()

Get parent element node Getting the parent DOM node of an element. jQuery: $.parent(), $.parents()

Get siblings of an element Get the next, previous or all siblings of an element or retrieve siblings that match a given selector. jQuery: $.siblings(), $.next(), $.nextAll(), $.prev, $.prevAll()

Get closest element by selector Get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. jQuery: $.closest()

Select the children of an element Getting the children of a DOM element. jQuery: $.children()

Manipulation

Create a DOM element How to create a new element and attach it to the DOM tree. jQuery: $(string)

Replace a DOM element Remove an element from the DOM tree and insert a new one in its place. jQuery: $.replaceAll(), $.replaceWith()

Unwrap a DOM element Remove the parents of an element from the DOM, leaving the element's content in place. jQuery: $.unwrap()

Empty an element's content Remove all child nodes of an element from the DOM. jQuery: $.empty()

Removing an element Remove an element from the DOM tree. jQuery: $.remove(), $.detach()

Insert an element after or before another Insert an HTML structure after or before a given DOM tree element. jQuery: $.after(), $.before(), $.insertAfter(), $.insertBefore

Get the text content of an element Get the combined text contents of an element, including its descendants, or set the text content of the element. jQuery: $.text()

Get and set the HTML content of an element Read or write the HTML content of an element. jQuery: $.html()

Append or prepend to an element Insert a new element or an HTML structure to the end or the beginning of another element's content. jQuery: $.append(), $.appendTo(), $.prepend(), $.prependTo()

Wrap an HTML structure around an element How to use a given container as wrapper for another DOM element. jQuery: $.wrap(), $.wrapAll()

Clone an element Create a deep copy of a DOM element. jQuery: $.clone()

Iterating over a list of selected elements How to loop through a NodeList and do something with each element. jQuery: $.each()

Attributes

Set, get, and remove properties of DOM elements Get the value of an input field or the href of an anchor. Learn how to work with element properties. jQuery: $.prop()

Adding, removing, and testing for classes addClass, removeClass, hasClass - three important functions for working with DOM element classes. jQuery: $.addClass, $.removeClass, $.hasClass, $.toggleClass