JQuery vs. Native JavaScript Operations

// To find the div by the id 'mainDiv'
document.getElementById("mainDiv");
// To find all elements of tag type 'p':
document.getElementsByTagName("p");
// To find an element using a CSS selector:
document.querySelector("div#mainDiv p"); // This returns the first element 'p' in the div with the ID mainDiv. If more than one element is found, then only the first is returned
// To find the input element with the class 'btn':
document.getElementsByClassName("btn"); // This is not supported in IE7/IE8
// To find all the elements of tag type 'p' using a generic CSS selector:
document.querySelectorAll("#mainDiv p"); // Uses CSS Selector
// To find the second 'p' element that is a descendant of '#mainDiv'
$("#mainDiv p").eq(2); // returns a DOM element wrapped in a JQuery object
$("#mainDiv p").get(3); // returns a raw DOM element
$("#mainDiv p")[3]; // return a raw DOM element
document.querySelectorAll("#mainDiv p").item(2); // returns the DOM element at index 2
document.querySelectorAll("#mainDiv p")[2]; // returns the DOM element at index 2
$("#mainDiv p").first(); // returns the first 'p' element that is a descendant of '#mainDiv' wrapped in a JQuery object
// Alternativly you can use:
$("#mainDiv p").eq(0);
// To obtain the first 'p' element as a raw DOM element:
$("#mainDiv p").get(0);
$("#mainDiv p")[0];
// To obtain the last 'p' element from a JQuery DOM query
$("#mainDiv p").last(); // DOM element wrapped in a JQuery object
$("#mainDiv p").eq(-1); // DOM element wrapped in a JQuery object
// To obtain the same element as a raw DOM element
$("#mainDiv p").get(-1);
// or
$("#mainDiv p")[$("#mainDiv p").length-1];
var pElements = document.querySelectorAll("#mainDiv p");
pElements[0];
// or
document.querySelector("#mainDiv p"); // This retrieves the first element
// To access the last element
pElements[pElements.length-1];
// or using the native array pop function
[].pop.call(pElements);
var prev = element.prev();
var next = element.next();
var prev = element.previousElementSibling;
var next = element.nextElementSibling;
$("#myDiv").is(".toolbar-icon");
document.getElementById("#myDiv").matches(".toolbar-icon");
if(Element && !Element.prototype.matches) {
var proto = Element.prototype;
proto.matches = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector;
}

--

--

--

An enthusiastic architect and full-stack developer with many years working with enterprise software and cloud services in multiple domains.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

7 React Component Collections from Popular Libraries

Arrays in JavaScript: Part 2

Morning! Hope everyone is enjoying

Automated Testing with Apollo Federation

I Almost Lost My Year-End Bonus Because of JSON.stringify

Input text with Figma component properties

Figma input text with component properties

Non-blocking, event-driven model of Node JS explained using real-world analogies

Loading config files from Wildfly modules

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Omar Barguti

Omar Barguti

An enthusiastic architect and full-stack developer with many years working with enterprise software and cloud services in multiple domains.

More from Medium

JavaScript Optional Chaining ?.

Promises In JAVASCRIPT

padEnd() JavaScript

ES6 JavaScript