JavaScript / jQuery DOM Selector

jQuery vs JavaScript

jQuery was created by John Resig in 2006. It is designed to handle browser incompatibilities and simplify HTML DOM operations, event handling, animations, and Ajax.

For more than a decade, jQuery has been the most popular JavaScript library in the world.

However, after JavaScript Version 5 (2009), most jQuery utilities can be solved with a few lines of standard JavaScript:

Find HTML elements by id

Return the element with id="intro":

jQuery

var myElement = $("#id01");

Try It Yourself

JavaScript

var myElement = document.getElementById("id01");

Try It Yourself

Find HTML elements by tag name

Return all <p> elements:

jQuery

var myElements = $("p");

Try It Yourself

Example

var myElements = document.getElementsByTagName("p");

Try It Yourself

Find HTML elements by class name

Returns all elements with class="intro".

jQuery

var myElements = $(".intro");

Try It Yourself

JavaScript

var myElements = document.getElementsByClassName("intro");

Try It Yourself

Methods do not work in Internet Explorer 8 and earlier versions.

Find HTML elements through CSS selectors

Returns a list of all <p> elements with class="intro".

jQuery

var myElements = $("p.intro");

Try It Yourself

JavaScript

var myElements = document.querySelectorAll("p.intro");

Try It Yourself

querySelectorAll() Methods do not work in Internet Explorer 8 and earlier versions.