Vanilla JS

https://vanilla.js.org
Admin
Vanilla JS is a fast, lightweight, cross-platform JavaScript DOM utility library that provides...
Tokens:8,308
Snippets:124
Trust Score:8.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### DOM Structure Example

Source: https://vanilla.js.org/

Example HTML structure used to illustrate the difference between HTMLElement, HTMLCollection, and NodeList.

```html
<div class="example">
  <span>(Text into) Html Element</span>
  <!-- Comment Element -->
  Text Element
  <span>(Text into) Html Element</span>
</div>
```

--------------------------------

### Perform GET requests with Vanilla JS

Source: https://vanilla.js.org/

Replaces jQuery's $.ajax GET method with the fetch API, including an XMLHttpRequest fallback for IE.

```javascript
$.ajax({
  type: 'GET',
  url: <url>,
  data: <data>
});
```

```javascript
fetch(<url>, {
  method: 'GET',
  body: <data>
});

/* // IE fallback
var get = new XMLHttpRequest();
get.open('GET', <url>, true);
get.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
get.send(<data>); */
```

--------------------------------

### Get Data

Source: https://vanilla.js.org/

Access data attributes by prefixing the name with 'data-'.

```javascript
$( <htmlElement> ).data( <dataName> );
```

```javascript
<htmlElement>.getAttribute('data-' + <dataName>);
```

--------------------------------

### Get text content

Source: https://vanilla.js.org/

Access the textContent property directly.

```javascript
$(<htmlElement>).text();

```

```javascript
<htmlElement>.textContent;

```

--------------------------------

### Get node HTML

Source: https://vanilla.js.org/

Use outerHTML to retrieve the element and its contents.

```javascript
$('<div>').append($(<htmlElement>).clone()).html();

```

```javascript
<htmlElement>.outerHTML;

```

--------------------------------

### Get Attribute

Source: https://vanilla.js.org/

Retrieve an attribute value using getAttribute.

```javascript
$( <htmlElement> ).attr( <attributeName> );
```

```javascript
<htmlElement>.getAttribute(<attributeName>);
```

--------------------------------

### Get HTML content

Source: https://vanilla.js.org/

Access the innerHTML property directly.

```javascript
$(<htmlElement>).html();

```

```javascript
<htmlElement>.innerHTML;

```

--------------------------------

### Get Offset from Document

Source: https://vanilla.js.org/

Calculate the element's position relative to the document.

```javascript
$( <htmlElement> ).offset();
```

```javascript
var rect = <htmlElement>.getBoundingClientRect()
{
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
}
```

--------------------------------

### Get Value

Source: https://vanilla.js.org/

Access the value property directly on input elements.

```javascript
$( <htmlElement> ).val();
```

```javascript
<htmlElement>.value;
```

--------------------------------

### Get current timestamp

Source: https://vanilla.js.org/

Replaces $.now() with Date.now().

```javascript
$.now();
```

```javascript
Date.now();
```

--------------------------------

### Get Parent Not Static

Source: https://vanilla.js.org/

Retrieve the nearest positioned ancestor element.

```javascript
$( <htmlElement> ).offsetParent();
```

```javascript
(<htmlElement>.offsetParent || <htmlElement>)
```

--------------------------------

### Get Style Property

Source: https://vanilla.js.org/

Retrieve a computed style property from an HTML element.

```javascript
$( <htmlElement> ).css( <property> );
```

```javascript
getComputedStyle( <htmlElement> )[ <property> ];
```

--------------------------------

### Get index from parent

Source: https://vanilla.js.org/

Convert children collection to an array to use indexOf.

```javascript
$(<htmlElement>).index();

```

```javascript
[].slice.call(<htmlElement>.parentNode.children).indexOf(<htmlElement>);

```

--------------------------------

### Get Inner Width

Source: https://vanilla.js.org/

Retrieve the inner width of an element including padding.

```javascript
$( <htmlElement> ).innerWidth();
```

```javascript
<htmlElement>.clientWidth
```

--------------------------------

### Get Inner Height

Source: https://vanilla.js.org/

Retrieve the inner height of an element including padding.

```javascript
$( <htmlElement> ).innerHeight();
```

```javascript
<htmlElement>.clientHeight
```

--------------------------------

### Get Offset from Parent

Source: https://vanilla.js.org/

Calculate the element's position relative to its offset parent.

```javascript
$( <htmlElement> ).position();
```

```javascript
{
    left: <htmlElement>.offsetLeft,
    top: <htmlElement>.offsetTop
}
```

--------------------------------

### Get Scroll Top Position

Source: https://vanilla.js.org/

Access the vertical scroll position of an element.

```javascript
$( <htmlElement> ).scrollTop();
```

```javascript
<htmlElement>.scrollTop;
```

--------------------------------

### Get Outer Width

Source: https://vanilla.js.org/

Retrieve the outer width of an element including padding and border.

```javascript
$( <htmlElement> ).outerWidth();
```

```javascript
<htmlElement>.offsetWidth
```

--------------------------------

### Get Outer Height

Source: https://vanilla.js.org/

Retrieve the outer height of an element including padding and border.

```javascript
$( <htmlElement> ).outerHeight();
```

```javascript
<htmlElement>.offsetHeight
```

--------------------------------

### Get Scroll Left Position

Source: https://vanilla.js.org/

Access the horizontal scroll position of an element.

```javascript
$( <htmlElement> ).scrollLeft();
```

```javascript
<htmlElement>.scrollLeft;
```

--------------------------------

### Include Vanilla JS in Production

Source: https://vanilla.js.org/

This section is intended for the production-ready implementation of the library.

```html

```

--------------------------------

### Include Vanilla JS in Development

Source: https://vanilla.js.org/

Use this script tag to include the library during the development phase.

```html
<!-- <script src="path/to/vanilla.js"></script> -->
```

--------------------------------

### Handle Request and Response with Vanilla JS

Source: https://vanilla.js.org/

Wraps fetch in a callback-based function to mimic jQuery's request pattern, with an XMLHttpRequest fallback.

```javascript
function request(url, next) {
    $.ajax({
        type: 'GET',
        url: url,
        success: function(response) {
          next(null, response);
        },
        error: function() {
          next(new Error('There was a connection error of some sort.'));
        }
    });
}

request(<url>, function (err, response) {
    if (err) {
      return err;
    }

    response;
});
```

```javascript
function request(url, next) {
    fetch(url)
        .then(function (response) {
            if (response.status >= 200 && response.status < 300) {
                return response;
            }

            next(new Error('We reached our target server, but it returned an error.'));
        })
        .then(function (response) {
            next(null, response);
        })
        .catch(function () {
            next(new Error('There was a connection error of some sort.'));
        });
}

/* // IE fallback
function request(url, next) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.send();

    request.addEventListener('load', function () {
        if (request.status < 200 && request.status >= 400) {
            return next(new Error('We reached our target server, but it returned an error.'));
        }

        next(null, request.responseText);
    });

    request.addEventListener('error', function () {
        return next(new Error('There was a connection error of some sort.'));
    });
} */

request(<url>, function (err, response) {
    if (err) {
      return err;
    }

    response;
});
```

--------------------------------

### Show Element

Source: https://vanilla.js.org/

Show an element by resetting its display style.

```javascript
$( <htmlElement> ).show();
```

```javascript
<htmlElement>.style.display = '';
```

--------------------------------

### Create elements

Source: https://vanilla.js.org/

Use document.createElement for creating new DOM nodes.

```javascript
$('<' + <tagString> + '>');

```

```javascript
document.createElement(<tagString>);

```

--------------------------------

### Set text content

Source: https://vanilla.js.org/

Assign a string to textContent.

```javascript
$(<htmlElement>).text(<string>);

```

```javascript
<htmlElement>.textContent = <string>;

```

--------------------------------

### Perform POST requests with Vanilla JS

Source: https://vanilla.js.org/

Replaces jQuery's $.ajax POST method with the fetch API, including an XMLHttpRequest fallback for IE.

```javascript
$.ajax({
  type: 'POST',
  url: <url>,
  data: <data>
});
```

```javascript
fetch(<url>, {
  method: 'POST',
  body: <data>
});

/* // IE fallback
var post = new XMLHttpRequest();
post.open('POST', <url>, true);
post.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
post.send(<data>); */
```

--------------------------------

### Prepend elements

Source: https://vanilla.js.org/

Use insertBefore with the first child to prepend.

```javascript
$(<htmlElement>).prepend($(<prependHtmlElement>));
// $(<htmlElement>).prepend(<htmlString>);

```

```javascript
<htmlElement>.insertBefore(<prependHtmlElement>, <htmlElement>.firstChild);
// <htmlElement>.insertAdjacentHTML('afterBegin', <htmlString>);

```

--------------------------------

### Load Event

Source: https://vanilla.js.org/

Listen for the load event on an element.

```javascript
$( <htmlElement> ).load(function () {
    // I am full loaded.
});
```

```javascript
<htmlElement>.addEventListener('load', function () {
    // I am full loaded.
});
```

--------------------------------

### Fetch JSON data with Vanilla JS

Source: https://vanilla.js.org/

Implements a JSON fetching utility using fetch with promise chaining, alongside an XMLHttpRequest-based fallback.

```javascript
function getJSON(url, next) {
    $.getJSON(url, function (data) {
        next(null, data);
    }).error(function () {
        next(new Error('There was a connection error of some sort.'));
    });
}

getJSON(<url>, function (err, data) {
    if (err) {
        return err;
    }

    data;
});
```

```javascript
function getJSON(url, next) {
    fetch(url)
        .then(function (data) {
            if (data.status >= 200 && data.status < 300) {
                return data;
            }

            next(new Error('We reached our target server, but it returned an error.'));
        })
        .then(function (data) {
            next(null, data.json());
        })
        .catch(function () {
            next(new Error('There was a connection error of some sort.'));
        });
}

/* // IE fallback
function getJSON(url, next) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.send();

    request.addEventListener('load', function () {
        if (request.status < 200 && request.status >= 400) {
            return next(new Error('We reached our target server, but it returned an error.'));
        }

        next(null, JSON.parse(request.responseText));
    });

    request.addEventListener('error', function (error) {
        next(new Error('There was a connection error of some sort.'), error);
    });
} */

getJSON(<url>, function (err, data) {
    if (err) {
      return err;
    }

    data;
});
```

--------------------------------

### Set HTML content

Source: https://vanilla.js.org/

Assign a string to innerHTML.

```javascript
$(<htmlElement>).html(<htmlString>);

```

```javascript
<htmlElement>.innerHTML = <htmlString>;

```

--------------------------------

### Wrap element

Source: https://vanilla.js.org/

Insert the wrapper before the element, then append the element to the wrapper.

```javascript
$(<htmlElement>).wrap($(<wrapHtmlElement>));

```

```javascript
<htmlElement>.parentNode.insertBefore(<wrapHtmlElement>, <htmlElement>);
<wrapHtmlElement>.appendChild(<htmlElement>);

```

--------------------------------

### Traverse Next Element

Source: https://vanilla.js.org/

Retrieves the immediate next sibling element.

```javascript
$(<htmlElement>).next();
```

```javascript
<htmlElement>.nextElementSibling; // HTMLElement
// <htmlElement>.nextSibling; // Node
```

--------------------------------

### Add Event Listener

Source: https://vanilla.js.org/

Use addEventListener to attach an event handler.

```javascript
$( <htmlElement> ).on(<eventName>, <eventHandler>);
```

```javascript
<htmlElement>.addEventListener(<eventName>, <eventHandler>);
```

--------------------------------

### Insert after element

Source: https://vanilla.js.org/

Use insertBefore with the next sibling to simulate insertion after.

```javascript
$(<htmlElement>).after($(<afterHtmlElement>));
// $(<htmlElement>).after(<htmlString>);

```

```javascript
<htmlElement>.parentNode.insertBefore(<afterHtmlElement>, <htmlElement>.nextSibling);
// <htmlElement>.insertAdjacentHTML('afterend', <htmlString>);

```

--------------------------------

### Select First Element

Source: https://vanilla.js.org/

Access the first element of an HTMLCollection using the item method or bracket notation.

```javascript
$( <selector> ).first();
```

```javascript
<htmlCollection>.item(0);
// <htmlCollection>[0];
```

--------------------------------

### Trigger Event

Source: https://vanilla.js.org/

Create and dispatch custom events using the Event constructor and dispatchEvent.

```javascript
var event = jQuery.Event('click');
event.test = true;

$(<htmlElement>).click(function (event) {
    event.test; // undefined by click, true by trigger.
});
$(<htmlElement>).trigger(event);
// $(<htmlElement>).trigger('click'); // Shortcut without test property.
```

```javascript
var event = new Event('click');
event.test = true;

<htmlElement>.addEventListener('click', function (event) {
    event.test; // undefined by click, true by trigger.
});
<htmlElement>.dispatchEvent(event);
```

--------------------------------

### Set Style Property

Source: https://vanilla.js.org/

Apply a style property to an HTML element.

```javascript
$( <htmlElement> ).css( <property>, <value> );
```

```javascript
<htmlElement>.style.<property> = <value>;
```

--------------------------------

### Select Element by Selector

Source: https://vanilla.js.org/

Retrieving a single element using a CSS selector string.

```javascript
var htmlElement = $('#id .classname tagname')[0];
```

```javascript
document.querySelector('#id .classname tagname');
```

--------------------------------

### Traverse Previous Element

Source: https://vanilla.js.org/

Retrieves the immediate previous sibling element.

```javascript
$(<htmlElement>).prev();
```

```javascript
<htmlElement>.previousElementSibling; // HTMLElement
// <htmlElement>.previousSibling // Node;
```

--------------------------------

### Insert before element

Source: https://vanilla.js.org/

Use insertBefore on the parent node.

```javascript
$(<htmlElement>).before($(<beforeHtmlElement>));
// $(<htmlElement>).before(<htmlString>);

```

```javascript
<htmlElement>.parentNode.insertBefore(<beforeHtmlElement>, <htmlElement>);
// <htmlElement>.insertAdjacentHTML('beforebegin', <htmlString>);

```

--------------------------------

### Add Class

Source: https://vanilla.js.org/

Use classList.add to append a class to an element's class list.

```javascript
$( <htmlElement> ).addClass( <className> );
```

```javascript
<htmlElement>.classList.add(<className>);
```

--------------------------------

### Change function context

Source: https://vanilla.js.org/

Replaces $.proxy with the native Function.prototype.bind method.

```javascript
$.proxy(<fn>, <context>);
```

```javascript
<fn>.bind(<context>);
```

--------------------------------

### Set Data

Source: https://vanilla.js.org/

Set a data attribute by prefixing the key with 'data-'.

```javascript
$( <htmlElement> ).data( <dataName>, <value> );
```

```javascript
<htmlElement>.setAttribute('data-' + <dataName>, <value>);
```

--------------------------------

### Match Selector

Source: https://vanilla.js.org/

Checks if the element matches the provided selector.

```javascript
$(<htmlElement>).is(<selector>);
```

```javascript
<htmlElement>.matches(<selector>);
```

--------------------------------

### Access Parent

Source: https://vanilla.js.org/

Retrieves the direct parent node.

```javascript
$(<htmlElement>).parent();
```

```javascript
<htmlElement>.parentNode;
```

--------------------------------

### DOM Ready

Source: https://vanilla.js.org/

Wait for the DOMContentLoaded event to ensure the document is ready for manipulation.

```javascript
$(document).ready(function () {
    // I am ready to be manipulate.
});
```

```javascript
document.addEventListener('DOMContentLoaded', function () {
    // I am ready to be manipulate.
});
```

--------------------------------

### Traverse Next Until Selector

Source: https://vanilla.js.org/

Retrieves all following siblings until the selector is matched.

```javascript
$(<htmlElement>).nextUntil(<nextSelector>);
```

```javascript
var htmlElement = <htmlElement>,
    nextUntil = [],
    until = true;
while (htmlElement = htmlElement.nextElementSibling) {
    (until && htmlElement && !htmlElement.matches(<nextSelector>)) ? nextUntil.push(htmlElement) : until = false;
}
nextUntil;
```

--------------------------------

### Traverse Next All Elements

Source: https://vanilla.js.org/

Retrieves all following sibling elements of the target.

```javascript
$(<htmlElement>).nextAll();
```

```javascript
var nextAll = false;
nextAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement.previousElementSibling === <htmlElement>) ? nextAll = true : nextAll;
});
```

--------------------------------

### Serialize form to string

Source: https://vanilla.js.org/

Replaces $.serialize with a custom function that encodes form data into a query string.

```javascript
$.serialize(<form>);
```

```javascript
function serialize(form) {
    var field, length, output = [];

    if (typeof form === 'object' && form.nodeName === 'FORM') {
        var length = form.elements.length;
        for (var i = 0; i < length; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type !== 'file' && field.type !== 'reset' && field.type !== 'submit' && field.type !== 'button') {
                if (field.type === 'select-multiple') {
                    length = form.elements[i].options.length;
                    for (var j=0; j < length; j++) {
                        if (field.options[j].selected) {
                            output[output.length] = encodeURIComponent(field.name) + '=' + encodeURIComponent(field.options[j].value);
                        }
                    }
                } else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
                    output[output.length] = encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value);
                }
            }
        }
    }

    return output.join('&').replace(/%20/g, '+');
}
serialize(<form>);
```

--------------------------------

### Slice Collection

Source: https://vanilla.js.org/

Create a shallow copy of a portion of a NodeList using Array.prototype.slice.

```javascript
$( <selector> ).slice(<startIndex>, <endIndex>);
```

```javascript
var nodeList = document.querySelectorAll(<selector>);
[].slice.call(nodeList, <startIndex>, <endIndex>);
```

--------------------------------

### Access First Child

Source: https://vanilla.js.org/

Retrieves the first child element.

```javascript
$(<htmlElement>).children().first();
```

```javascript
<htmlElement>.firstChild();
```

--------------------------------

### Animation

Source: https://vanilla.js.org/

Implement fade-in effects using requestAnimationFrame for smooth transitions.

```javascript
function fadeIn($htmlElement, speed, next) {
    $htmlElement.css('opacity', '0').animate({ opacity: 1 }, speed, next);
}
fadeIn($(<htmlElement>), 2000, function () {
  $(this).css('opacity', '');
});
```

```javascript
function fadeIn(htmlElement, speed, next) {
    var last = +new Date(),
        tick = function () {
            htmlElement.style.opacity = +htmlElement.style.opacity + (new Date() - last) / speed;

            last = +new Date();

            if (+htmlElement.style.opacity < 1) {
                requestAnimationFrame(tick);
            } else if (next) {
                next.call(htmlElement);
            }
        };

    htmlElement.style.opacity = 0;
    tick();
}

fadeIn(<htmlElement>, 2000, function () {
    this.style.opacity = '';
});
```

--------------------------------

### Parse HTML string

Source: https://vanilla.js.org/

Replaces $.parseHTML with a custom function using DOMParser or createHTMLDocument.

```javascript
$.parseHTML(<htmlString>);
```

```javascript
function parseHTML(htmlString) {
    var body = document.implementation.createHTMLDocument().body;
    body.innerHTML = htmlString;
    return body.childNodes;
}

parseHTML(<htmlString>);
```

--------------------------------

### Parse XML string

Source: https://vanilla.js.org/

Replaces $.parseXML with the native DOMParser API.

```javascript
$.parseXML(<xmlString>);
```

```javascript
function parseXML(xmlString) {
    return (new DOMParser()).parseFromString(xmlString, 'text/xml');
}

parseXML(<xmlString>);
```

--------------------------------

### Iterate Over Class Name Elements

Source: https://vanilla.js.org/

Iterating over elements retrieved by class name using live HTMLCollections.

```javascript
$('.classname').each(function (i, htmlElement) {
    htmlElement;
});
```

```javascript
var htmlCollection = document.getElementsByClassName('classname'); // Live
// var nodeList = document.querySelectorAll('.classname'); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
    htmlElement;
});
```

--------------------------------

### Trim whitespace

Source: https://vanilla.js.org/

Replaces $.trim with the native String.prototype.trim method.

```javascript
$.trim(<string>);
```

```javascript
<string>.trim();
```

--------------------------------

### Traverse Previous Until Selector

Source: https://vanilla.js.org/

Retrieves all preceding siblings until the selector is matched.

```javascript
$(<htmlElement>).prevUntil(<previousSelector>);
```

```javascript
var htmlElement = <htmlElement>,
    previousUntil = [],
    until = true;
while (htmlElement = htmlElement.previousElementSibling) {
    (until && htmlElement && !htmlElement.matches(<previousSelector>)) ? previousUntil.push(htmlElement) : until = false;
}
previousUntil;
```

--------------------------------

### Reversed Iteration Loop

Source: https://vanilla.js.org/

Iterating over a collection in reverse order.

```javascript
$($('.className').get().reverse()).each(function (i, htmlElement) {
    htmlElement;
});
```

```javascript
var htmlCollection = document.getElementsByClassName('className'), // Live
    i = htmlCollection.length;
while (htmlElement = htmlCollection[--i]) {
    htmlElement;
}
```

--------------------------------

### Traverse Parents Until Selector

Source: https://vanilla.js.org/

Retrieves ancestors until the selector is matched.

```javascript
var parents = $(<htmlElement>).parentsUntil(<parentSelector>);
```

```javascript
var htmlElement = <htmlElement>,
    parentsUntil = [],
    until = true;
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    (until) ? parents.push(htmlElement) : until = false;
}
parentsUntil;

/* // IE fallback
var htmlElement = <htmlElement>,
    parentsUntil = [],
    until = true;
while (htmlElement = htmlElement.parentNode) {
    (until && htmlElement.matches && !htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : until = false;
}
parentsUntil; */
```

--------------------------------

### Extend objects

Source: https://vanilla.js.org/

Replaces $.extend with Object.assign. Includes a commented-out IE fallback for shallow merging.

```javascript
<object> = $.extend(<extendingObject>, <object>);
```

```javascript
<object> = Object.assign(<object>, <extendingObject>);

/* // IE fallback (not deep)
Object.keys(<object>).forEach(function (key) {
    <object>[key] = (<extendingObject>[key]) ? <extendingObject>[key] : <object>[key];
});
<object>; */
```

--------------------------------

### Iterate Over Tag Name Elements

Source: https://vanilla.js.org/

Iterating over elements retrieved by tag name.

```javascript
$('tagname').each(function (i, htmlElement) {
    htmlElement;
});
```

```javascript
var htmlCollection = document.getElementsByTagName('tagname'); // Live
// var nodeList = document.querySelectorAll('tagname'); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
    htmlElement;
});
```

--------------------------------

### One-time Event Listener

Source: https://vanilla.js.org/

Use the { once: true } option to trigger an event listener only once.

```javascript
$( <htmlElement> ).one(<eventName>, <eventHandler>);
```

```javascript
<htmlElement>.addEventListener(<eventName>, <eventHandler>, { once: true });

/* // IE fallback
<htmlElement>.addEventListener(<eventName>, function callee(event) {
    event.target.removeEventListener(e.type, callee);
}); */
```

--------------------------------

### Compare elements

Source: https://vanilla.js.org/

Native comparison uses strict equality on DOM nodes.

```javascript
var $a = $(<selectorToFirstHtmlElement>).find(<selectorToSecondHtmlElement>);
    $b = $(<selectorToSecondHtmlElement>);

$a.is($b);

```

```javascript
var temp = document.getElementsByTagName(<selectorToFirstHtmlElement>)[0],
    a = temp.getElementsByTagName(<selectorToSecondHtmlElement>)[0],
    b = document.querySelector(<selectorToSecondHtmlElement>);

(a === b);

```

--------------------------------

### Traverse All Previous Elements

Source: https://vanilla.js.org/

Retrieves all preceding sibling elements of the target.

```javascript
$(<htmlElement>).prevAll();
```

```javascript
var prevAll = true;
prevAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement === <htmlElement>) ? prevAll = false : prevAll;
});
```

--------------------------------

### Select Element by Index

Source: https://vanilla.js.org/

Retrieve a specific element from an HTMLCollection by its index.

```javascript
$( <selector> ).eq(<index>);
```

```javascript
<htmlCollection>.item(<index>);
// <htmlCollection>[<index>];
```

--------------------------------

### Map array elements

Source: https://vanilla.js.org/

Replaces $.map with the native Array.prototype.map method.

```javascript
$.map(<array>, function (item, i) {
    return <operations>;
});
```

```javascript
<array>.map(function (item, i) {
    return <operations>;
});
```

--------------------------------

### Append elements

Source: https://vanilla.js.org/

Use appendChild for nodes or insertAdjacentHTML for strings.

```javascript
$(<htmlElement>).append($(<appendHtmlElement>));
// $(<htmlElement>).append(<appendHtmlElement>);

```

```javascript
<htmlElement>.appendChild(<appendHtmlElement>);
// <htmlElement>.insertAdjacentHTML('beforeEnd', <htmlString>);

```

--------------------------------

### Iterate Over Name Attribute Elements

Source: https://vanilla.js.org/

Iterating over elements retrieved by the name attribute.

```javascript
$('[name="name"]').each(function (i, htmlElement) {
    htmlElement;
});
```

```javascript
var nodeList = document.getElementsByName('name'); // Live
// var nodeList = document.querySelectorAll('[name=name]'); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
    node;
});
```

--------------------------------

### Select Element by ID

Source: https://vanilla.js.org/

Retrieving a single element by its ID attribute.

```javascript
var htmlElement = $('#id')[0];
```

```javascript
var htmlElement = document.getElementById('id');
```

--------------------------------

### Toggle Class

Source: https://vanilla.js.org/

Toggle a class on an element using classList.toggle.

```javascript
$( <htmlElement> ).toggleClass( <className> );
```

```javascript
<htmlElement>.classList.toggle(<className>);
```

--------------------------------

### Check Selector Match

Source: https://vanilla.js.org/

Verify if any element in a collection matches a specific CSS selector using the matches method.

```javascript
$( <selector> ).is(<matchesSelector>);
```

```javascript
var nodeList = document.querySelectorAll(<selector>);
[].some.call(nodeList, function (node) {
    return node.matches(<matchesSelector>);
});
```

--------------------------------

### Traverse All Parents

Source: https://vanilla.js.org/

Retrieves all ancestor elements of the target.

```javascript
var parents = $(<htmlElement>).parents();
```

```javascript
var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    parents.push(htmlElement);
}
parents;
```

--------------------------------

### Has Class

Source: https://vanilla.js.org/

Check for the existence of a class using classList.contains.

```javascript
$( <htmlElement> ).hasClass( <className> );
```

```javascript
<htmlElement>.classList.contains(<className>);
```

--------------------------------

### Iterate over arrays

Source: https://vanilla.js.org/

Replaces jQuery's $.each with the native Array.prototype.forEach method.

```javascript
$.each(<array>, function (i, item) {
    (item === <array>[i]); // true
});
```

```javascript
<array>.forEach(function (item, i) {
    (item === <array>[i]); // true
});
```

--------------------------------

### Hide Element

Source: https://vanilla.js.org/

Hide an element by setting its display style to 'none'.

```javascript
$( <htmlElement> ).hide();
```

```javascript
<htmlElement>.style.display = 'none';
```

--------------------------------

### Hover Event

Source: https://vanilla.js.org/

Bind mouseenter and mouseleave events separately.

```javascript
$( <htmlElement> ).hover(<eventHandlerMouseIn>, <eventHandlerMouseOut>);
```

```javascript
<htmlElement>.addEventListener('mouseenter', <eventHandlerMouseIn>);
<htmlElement>.addEventListener('mouseleave', <eventHandlerMouseOut>);
```

--------------------------------

### Access Siblings

Source: https://vanilla.js.org/

Retrieves all sibling elements of the target.

```javascript
$(<htmlElement>).siblings();
```

```javascript
[].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return htmlElement !== <htmlElement>;
});
```

--------------------------------

### Find Descendant Children

Source: https://vanilla.js.org/

Queries descendants matching the provided selector.

```javascript
$(<htmlElement>).find(<childrenSelector>);
```

```javascript
<htmlElement>.querySelectorAll(<childrenSelector>);
```

--------------------------------

### Traverse Parents Matching Selector

Source: https://vanilla.js.org/

Retrieves ancestors that match the provided selector.

```javascript
var parents = $(<htmlElement>).parents(<parentSelector>);
```

```javascript
var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    parents.push(htmlElement);
}
parents;

/* // IE fallback
var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : '';
}
parents; */
```

--------------------------------

### Unwrap element

Source: https://vanilla.js.org/

Move children to the parent and remove the element.

```javascript
$(<htmlElement>).unwrap();

```

```javascript
while (<htmlElement>.firstChild) {
    <unwrapHtmlElement>.insertBefore(<htmlElement>.firstChild, <htmlElement>);
}
<unwrapHtmlElement>.removeChild(<htmlElement>);

```

--------------------------------

### Set node HTML

Source: https://vanilla.js.org/

Assign a string to outerHTML to replace the element itself.

```javascript
$(<htmlElement>).replaceWith(<htmlString>);

```

```javascript
<htmlElement>.outerHTML = <htmlString>;

```

--------------------------------

### Iterate Over Selected Elements

Source: https://vanilla.js.org/

Iterating over a collection of elements matching a CSS selector.

```javascript
$('#id .classname tagname').each(function (i, htmlElement) {
    htmlElement;
});
```

```javascript
var nodeList = document.querySelectorAll('#id .classname tagname'); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
    node;
});
```

--------------------------------

### Check containment

Source: https://vanilla.js.org/

Use the contains method on the parent node.

```javascript
$.contains($(<htmlElement>), $(<childHtmlElement>));

```

```javascript
(<htmlElement> !== <childHtmlElement>) && <htmlElement>.contains(<childHtmlElement>);

```

--------------------------------

### Clone elements

Source: https://vanilla.js.org/

Native cloneNode requires a boolean argument to specify deep cloning.

```javascript
$(<htmlElement>).clone();

```

```javascript
<htmlElement>.cloneNode(true);

```

--------------------------------

### Replace element

Source: https://vanilla.js.org/

Use replaceChild on the parent node.

```javascript
$(<htmlElement>).replaceWith($(<newHtmlElement>));

```

```javascript
<htmlElement>.parentNode.replaceChild(<newHtmlElement>, <htmlElement>);

```

--------------------------------

### Parse JSON string

Source: https://vanilla.js.org/

Replaces $.parseJSON with the native JSON.parse method.

```javascript
$.parseJSON(<jsonString>);
```

```javascript
JSON.parse(<jsonString>);
```

--------------------------------

### Set Value

Source: https://vanilla.js.org/

Assign a value directly to the element's value property.

```javascript
$( <htmlElement> ).val(<value>);
```

```javascript
<htmlElement>.value = <value>;
```

--------------------------------

### Access Children

Source: https://vanilla.js.org/

Retrieves the direct children of the target element.

```javascript
$(<htmlElement>).children();
```

```javascript
<htmlElement>.children;
```

--------------------------------

### Set Attribute

Source: https://vanilla.js.org/

Update an attribute value using setAttribute.

```javascript
$( <htmlElement> ).attr( <attributeName>, <value> );
```

```javascript
<htmlElement>.setAttribute(<attributeName>, <value>);
```

--------------------------------

### Serialize form to array

Source: https://vanilla.js.org/

Replaces $.serializeArray with a custom function that iterates over form elements.

```javascript
$.serializeArray(<form>);
```

```javascript
function serializeArray(form) {
    var field, length, output = [];

    if (typeof form === 'object' && form.nodeName === 'FORM') {
        var length = form.elements.length;
        for (i = 0; i < length; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type !== 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
                if (field.type === 'select-multiple') {
                    length = form.elements[i].options.length;
                    for (j = 0; j < length; j++) {
                        if(field.options[j].selected)
                            output[output.length] = { name: field.name, value: field.options[j].value };
                    }
                } else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
                    output[output.length] = { name: field.name, value: field.value };
                }
            }
        }
    }

    return output;
}
serializeArray(<form>);
```

--------------------------------

### Find Closest Parent

Source: https://vanilla.js.org/

Finds the nearest ancestor matching the provided selector.

```javascript
$(<htmlElement>).closest(<parentSelector>);
```

```javascript
<htmlElement>.closest(<parentSelector>);

/* // IE fallback
var htmlElement = <htmlElement>,
    parents = [];
while (htmlElement = htmlElement.parentNode) {
    (htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : '';
}
parents[0]; */
```

--------------------------------

### Select Last Element

Source: https://vanilla.js.org/

Access the final element in an HTMLCollection using its length property.

```javascript
$( <selector> ).last();
```

```javascript
<htmlCollection>.item(<htmlCollection>.length - 1);
// <htmlCollection>[<htmlCollection>.length - 1];
```

--------------------------------

### Filter Elements

Source: https://vanilla.js.org/

Use Array.prototype.filter to narrow down a NodeList based on a condition.

```javascript
$( <selector> ).filter(function (i, htmlElement) {
    return <filterCondition>;
}).each(function (i, htmlElement) {
    htmlElement;
});
```

```javascript
var nodeList = document.querySelectorAll(<selector>);

nodeList = [].filter.call(nodeList, function (node) {
    return <filterCondition>;
});

[].forEach.call(nodeList, function (node) {
    node;
});
```

--------------------------------

### Check if array

Source: https://vanilla.js.org/

Replaces $.isArray with the native Array.isArray method.

```javascript
$.isArray(<array>);
```

```javascript
Array.isArray(<array>);
```

--------------------------------

### Remove Class

Source: https://vanilla.js.org/

Remove a class from an element using classList.remove.

```javascript
$( <htmlElement> ).removeClass( <className> );
```

```javascript
<htmlElement>.classList.remove(<className>);
```

--------------------------------

### Access Last Child

Source: https://vanilla.js.org/

Retrieves the last child element.

```javascript
$(<htmlElement>).children().last();
```

```javascript
<htmlElement>.lastChild();
```

--------------------------------

### Empty elements

Source: https://vanilla.js.org/

Setting innerHTML to an empty string clears all children.

```javascript
$(<htmlElement>).empty();

```

```javascript
<htmlElement>.innerHTML = '';

```

--------------------------------

### Find index in array

Source: https://vanilla.js.org/

Replaces $.inArray with the native Array.prototype.indexOf method.

```javascript
$.inArray(<item>, <array>);
```

```javascript
<array>.indexOf(<item>);
```

--------------------------------

### Filter Out Elements

Source: https://vanilla.js.org/

Exclude elements that match a specific selector using the matches method.

```javascript
$( <selector> ).not(<matchesSelector>);
```

```javascript
var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
    return !node.matches(<matchesSelector>);
});
```

--------------------------------

### Set Scroll Left Position

Source: https://vanilla.js.org/

Set the horizontal scroll position of an element.

```javascript
$( <htmlElement> ).scrollLeft( <distance> );
```

```javascript
<htmlElement>.scrollLeft = <distance>;
```

--------------------------------

### Remove Data

Source: https://vanilla.js.org/

Remove a data attribute by targeting the 'data-' prefixed attribute name.

```javascript
$( <htmlElement> ).removeData( <dataName> );
```

```javascript
<htmlElement>.removeAttribute('data-' + <dataName>);
```

--------------------------------

### Filter by Child Presence

Source: https://vanilla.js.org/

Check for the existence of a child element matching a selector within the current nodes.

```javascript
$( <selector> ).has(<matchesChildSelector>);
```

```javascript
var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
    return node.querySelector(<matchesChildSelector>);
});
```

--------------------------------

### Remove children

Source: https://vanilla.js.org/

Iteratively remove children until the element is empty.

```javascript
$(<htmlElement>).empty();

```

```javascript
while (<htmlElement>.firstChild) {
    <htmlElement>.removeChild(<htmlElement>.firstChild);
}
// <htmlElement>.innerHTML = '';

```

--------------------------------

### Remove element

Source: https://vanilla.js.org/

Remove a node via its parent.

```javascript
$(<htmlElement>).remove();

```

```javascript
<htmlElement>.parentNode.removeChild(<htmlElement>);

```

--------------------------------

### Set Scroll Top Position

Source: https://vanilla.js.org/

Set the vertical scroll position of an element.

```javascript
$( <htmlElement> ).scrollTop( <distance> );
```

```javascript
<htmlElement>.scrollTop = <distance>;
```

--------------------------------

### Remove Event Listener

Source: https://vanilla.js.org/

Use removeEventListener to detach an event handler.

```javascript
$( <htmlElement> ).off(<eventName>, <eventHandler>);
```

```javascript
<htmlElement>.removeEventListener(<eventName>, <eventHandler>);
```

--------------------------------

### Remove Attribute

Source: https://vanilla.js.org/

Remove an attribute from an element using removeAttribute.

```javascript
$( <htmlElement> ).removeAttr( <attributeName> );
```

```javascript
<htmlElement>.removeAttribute(<attributeName>);
```
Tokens:
Raw