Native equivalents of jQuery functions

If you are just targetting modern browsers and want more performance, it maybe a good idea to use native functions instead. Lee Brimelow wrote a very nice article on it. Some notes/summary below:

Selecting elements

// Selecting a tag
document.getElementsByTagName("div")

// Selecting all elements with a CSS class
document.getElementsByClassName("my-class")

// Get by generic CSS selector (very similar to `$("..."))
document.querySelectorAll("#elemId div:first-child")

// Just get the first element found
document.querySelector("#elemId div:first-child")

DOM manipulation

// Append HTML element
var frag = document.createDocumentFragment();
var div = document.createElement("div");
div.id = "someId";

var img = document.createElement("img");
img.src = "img.png";

div.appendChild(img);
frag.appendChild(div);

// append
document.body.appendChild(frag);
// prepend
document.body.insertBefore(frag, 
    document.body.firstChild);

CSS classes

var el = document.querySelector("...")

// adding class
el.addClass("className")

// remove class
el.classList.remove("className")

// has a class?
el.classList.contains("className")

Modify CSS

el.style.background = "#FFF"
el.style.color = "#222"

But wonder if the performance difference between jQuery 2 (targets mainly modern browsers) will perform compared to native equivalents, perhaps they will be more negligible