---
title: "Power of Vanilla JS"
description: "Demonstrating the power of native JavaScript without jQuery. Practical notes and code examples on Power of Vanilla JS by."
url: "https://h3manth.com/scribe/power-of-vanilla-js/"
canonical_url: "https://h3manth.com/scribe/power-of-vanilla-js/"
markdown_url: "https://h3manth.com/scribe/blog/power-of-vanilla-js.md"
publishDate: "2013-04-26T00:00:00.000Z"
author: "Hemanth HM"
category: "javascript"
tags: ["javascript","vanilla-js"]
word_count: 128
reading_time_minutes: 1
x_markdown_tokens: 434
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Power of Vanilla JS

> Demonstrating the power of native JavaScript without jQuery. Practical notes and code examples on Power of Vanilla JS by.

I have great respect for jQuery, but I also love the sheer power of vanilla JS.

## Event Listeners (credits @alunny)

```javascript
var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventListener;

$("somelink")[0].on('touchstart', handleTouch);

## DOM Manipulation
javascript
parent.appendChild(child)                        // append
parent.insertBefore(child, parent.childNodes[0]) // prepend
child.parentNode.removeChild(child)              // remove

## Looping Through NodeList
javascript
[].forEach.call(document.querySelectorAll('a'), function(elem) {
  console.log(elem.src);
});

## Convert NodeList to Array
javascript
myList = Array.prototype.slice.call(myNodeList);

## Select by Data Attribute
javascript
var matches = el.querySelectorAll('iframe[data-src]');

## Nesting Many Levels
javascript
var cells = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");

## Multiple IDs
javascript
var x = document.querySelector("#bar, #foo");

## Inline CSS
javascript
document.querySelector("#mainLink").style.cssText = 'color:red';

## Test if Element Contains
javascript
var child = document.querySelector('#child');
console.log(document.querySelector('parent').contains(child));
```

> **DYK?** `getElementsByTagName()` returns a Live NodeList which is faster than `querySelectorAll()` which returns a static NodeList.