Simple jQuery-Free Snippets with JavaScript

You might have noticed lately there’s this whole thing with front-end developers using “pure” JavaScript (i.e JavaScript), rather than third-party libraries like jQuery.

Maybe you’ve seen YouMightNotNeedjQuery.com – a snippet list of basic  jQuery-less JavaScript syntax.
No doubt, JavaScript “purists” and advocates have been around for a long time, however jQuery is often considered the go-to library for beginners (which is a controversial debate in itself). Nonetheless, using jQuery has many advantages over library-less JavaScript.
However there are other times when it may not be necessary. jQuery often carries a sense of “No questions asked” type notion with many people, without real thought into why it’s being used. Subsequently, it often gets included in projects where it may not be necessary or ideal. It’s not uncommon to see an entire website with jQuery included, exclusively for simple tasks like adding a class or toggling a button.
If you find yourself doing this, you might want to look at using JavaScript without jQuery. If you’re working on larger projects, you could even look at creating your own functions for simple tasks or include a slimmed-down selector-library like Apollo.js or Sizzle.js.
Furthermore, If you’re entering the world of native JavaScript through jQuery, I highly recommend reading this article here by Todd Motto. It’s super simple, explained in basic language and in a logical order.
Here are some quick snippets for some common tasks I’ve come to use. I’ve included CodePens to demonstrate a simple example of each in use.

Query All Elements By Class-Name

JavaScript

var elements = document.querySelectorAll('.elements');

for (i = 0; i < elements.length; ++i) {

elements[i] // Do something

}

---

Query Selector by ID

JavaScript

var element = document.querySelector('#element');

element // Do somethiing

---

Query Element By ID

JavaScript

var element = document.getElementById("element");

element // Do Something

---

Query Multiple Selectors

JavaScript

var elements = document.querySelectorAll("#element-ID, .element-class");

for (var i = 0; i < elements.length; i++) {

elements[i] // Do something

}

---

Query Descendants

JavaScript

var elements = document.querySelectorAll('.elements code');

for (i = 0; i < elements.length; ++i) {

elements[i] // Do something

}

---

Reference Child Combinator

JavaScript

var elements = document.querySelectorAll('.elements > code');

for (i = 0; i < elements.length; ++i) {

elements[i] // Do something

}

---

Reference Adjacent Sibling (any)

JavaScript

var element = document.querySelectorAll('.element + *');

for (i = 0; i < element.length; ++i) {

element[i] // Do something

}

---

Reference Adjacent Sibling (specific)

JavaScript

var element = document.querySelectorAll('.element + .next');

for (i = 0; i < element.length; ++i) {

element[i] // Do something

}

---

Reference General Sibling

JavaScript

var elements = document.querySelectorAll('.element ~ .next');

for (i = 0; i < elements.length; ++i) {

elements[i] // Do something

}

---

Reference Data-Attribute

JavaScript

var dataElements = document.querySelectorAll('code[data-selection="element"]');

for (i = 0; i < dataElements.length; ++i) {

dataElements[i] // Do something

}

---

Data-Attribute to Id Linking

JavaScript

var trigger = document.querySelectorAll('.trigger');

for (var i =0; i < trigger.length; i++) {

var btn = trigger[i];

btn.addEventListener('click', function () {

var id = this.dataset.subject;

document.querySelector('#' + id) // Do something

}, false);

}

---

Style Element

JavaScript

var element = document.querySelector('#element');

element.style.color = "#af7aa5";

---

Add Class To All Selectors

JavaScript

var elements = document.querySelectorAll('code');

for (i = 0; i < elements.length; ++i) {

elements[i].classList.add("pink");

}

---

Remove Class On All Selectors

JavaScript

var elements = document.querySelectorAll('code.pink');

for (i = 0; i < elements.length; ++i) {

elements[i].classList.remove("pink");;

}

---

Toggle Class On All Selectors – OnClick

JavaScript

var trigger = document.querySelectorAll('.trigger');

for (var i =0; i < trigger.length; i++) {

trigger[i].addEventListener('click', function () {

this.classList.toggle('active');

}, false);

}

---

Append To All Classes

JavaScript

var elements = document.querySelectorAll('code');

for (i = 0; i < elements.length; ++i) {

elements[i].innerHTML = elements[i].innerHTML + 'Your Content Goes Here';

}

---

DOM Load

JavaScript

document.addEventListener('DOMContentLoaded', function(){

// Do something

});

---

Window Load

JavaScript

window.addEventListener('load', function(){

// Do something

});

---

Reference Body

JavaScript

var body = document.body;

body // Do something

---

Reference HTML

JavaScript

HTML = document.documentElement;

HTML // Do Something

---

Note: Some of these snippets may not provide full legacy browser support (e.g Internet Explorer versions < 7).

---

Further Information

YouMightNotNeedjQuery.com - Snippet List.
Creating jQuery-style functions in JavaScript – Todd Motto.

When to use Vanilla JavaScript vs. jQuery? - Stack Overflow.

Apollo.js – Standalone class manipulation for JavaScript.

Is it time to drop jQuery? – Todd Motto.
Choosing Vanilla JavaScript – A List Apart.
Sizzle.js - A pure-JavaScript CSS selector engine.