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

}

See the Pen ylIzD by Abhishek (@abhibagul) on CodePen.

---

Query Selector by ID

JavaScript

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

element // Do somethiing

See the Pen uodHF by Abhishek (@abhibagul) on CodePen.

---

Query Element By ID

JavaScript

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

element // Do Something

See the Pen AKkrC by Abhishek (@abhibagul) on CodePen.

---

Query Multiple Selectors

JavaScript

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

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

elements[i] // Do something

}

See the Pen Axbhd by Abhishek (@abhibagul) on CodePen.

---

Query Descendants

JavaScript

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

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

elements[i] // Do something

}

See the Pen jnzGC by Abhishek (@abhibagul) on CodePen.

---

Reference Child Combinator

JavaScript

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

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

elements[i] // Do something

}

See the Pen EiGAJ by Abhishek (@abhibagul) on CodePen.

---

Reference Adjacent Sibling (any)

JavaScript

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

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

element[i] // Do something

}

See the Pen bskgF by Abhishek (@abhibagul) on CodePen.

---

Reference Adjacent Sibling (specific)

JavaScript

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

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

element[i] // Do something

}

See the Pen boKhz by Abhishek (@abhibagul) on CodePen.

---

Reference General Sibling

JavaScript

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

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

elements[i] // Do something

}

See the Pen iFqph by Abhishek (@abhibagul) on CodePen.

---

Reference Data-Attribute

JavaScript

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

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

dataElements[i] // Do something

}

See the Pen xnvfr by Abhishek (@abhibagul) on CodePen.

---

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);

}

See the Pen enzcJ by Abhishek (@abhibagul) on CodePen.

---

Style Element

JavaScript

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

element.style.color = "#af7aa5";

See the Pen kayEI by Abhishek (@abhibagul) on CodePen.

---

Add Class To All Selectors

JavaScript

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

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

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

}

See the Pen vbgiK by Abhishek (@abhibagul) on CodePen.

---

Remove Class On All Selectors

JavaScript

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

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

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

}

See the Pen pwkEs by Abhishek (@abhibagul) on CodePen.

---

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);

}

See the Pen HqtIj by Abhishek (@abhibagul) on CodePen.

---

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';

}

See the Pen mbzDc by Abhishek (@abhibagul) on CodePen.

---

DOM Load

JavaScript

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

// Do something

});

See the Pen ebhEn by Abhishek (@abhibagul) on CodePen.

---

Window Load

JavaScript

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

// Do something

});

See the Pen viraF by Abhishek (@abhibagul) on CodePen.

---

Reference Body

JavaScript

var body = document.body;

body // Do something

See the Pen jGacm by Abhishek (@abhibagul) on CodePen.

---

Reference HTML

JavaScript

HTML = document.documentElement;

HTML // Do Something

See the Pen GoJys by Abhishek (@abhibagul) on CodePen.

---

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.