Jquery VS Document.Queryselectorall

jQuery vs document.querySelectorAll

document.querySelectorAll() has several inconsistencies across browsers and is not supported in older browsers^{This probably won't cause any trouble anymore nowadays}. It has a very unintuitive scoping mechanism and some other not so nice features. Also with javascript you have a harder time working with the result sets of these queries, which in many cases you might want to do. jQuery provides functions to work on them like: filter(), find(), children(), parent(), map(), not() and several more. Not to mention the jQuery ability to work with pseudo-class selectors.

However, I would not consider these things as jQuery's strongest features but other things like "working" on the dom (events, styling, animation & manipulation) in a crossbrowser compatible way or the ajax interface.

If you only want the selector engine from jQuery you can use the one jQuery itself is using: Sizzle That way you have the power of jQuerys Selector engine without the nasty overhead.

EDIT:
Just for the record, I'm a huge vanilla JavaScript fan. Nonetheless it's a fact that you sometimes need 10 lines of JavaScript where you would write 1 line jQuery.

Of course you have to be disciplined to not write jQuery like this:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

This is extremely hard to read, while the latter is pretty clear:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

The equivalent JavaScript would be far more complex illustrated by the pseudocode above:

1) Find the element, consider taking all element or only the first.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Iterate over the array of child nodes via some (possibly nested or recursive) loops and check the class (classlist not available in all browsers!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) apply the css style

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

This code would be at least two times as much lines of code you write with jQuery. Also you would have to consider cross-browser issues which will compromise the severe speed advantage (besides from the reliability) of the native code.

document.querySelector('.class'); vs jQuery $(.class); - are they interchangeable?

They are not the same only because .querySelector always return 1 or 0 HTML node, jQuery return all of them. $('.expander-contracted') will be the same as document.querySelectorAll('.expander-contracted') (minus the fact that jQuery return a jQuery object).

That being said, that's not the problem. What actually happen is that jQuery return a jQuery object that has its own method and property. document.querySelector return an HTML element which also have its own property and method that are not the same as the jQuery object.

Since .offsetHeight and other properties in the condition are all HTML element properties, you can't directly access it with a jQuery object. jQuery has its own method to access those properties : .prop.

So, instead of :

expanderContracted.offsetHeight;

use :

expanderContracted.prop('offsetHeight');

Of course, you'll have to change every properties that are not jQuery related (I've used offsetHeight has example).

JavaScript's document.querySelector() same as jQuery $() method?

Cross-browser and legacy support.

You can also use getElementsByClassName() if you don't want to use Jquery. There is a response to a post on devshed by user: KorRedDevil that may be of interest to you.

I took your function from your post and made it return an array. After you have that array of elements, all you have to do is loop over them. You can try it out here.

Javascript:

var retrieve = function(className) {
    return document.getElementsByClassName(className);
};

var elements = retrieve('foo');
for (var i = 0; i < elements.length; i++)
    elements[i].style.background = '#dfd';

Markup:

<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="foo">foo</p>
<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="bar">bar</p>

How to use document.querySelectorAll() into jQuery for performance?

Yes, it should work. $(elems) will create a jQuery collection object from the NodeList, and then you can use jQuery methods on it.

However, I don't think there will be as much benefit as you expect. jQuery already calls querySelectorAll() when feasible. There may be a small amount of overhead in determining whether QSA can be used for a given selector. But jQuery caches the result of this, so the overhead is mitigated if you use a selector frequently.

Which has better performance jQuery class selector or document.querySelectorAll?

If you are using selection query compatible to querySelectorAll you'll get the same performance.

jQuery is a smart and well designed library: it uses querySelectorAll internally if it's available in the browser.

https://github.com/jquery/jquery/search?q=querySelectorAll&unscoped_q=querySelectorAll

jQuery vs document.querySelectorAll

document.querySelectorAll() has several inconsistencies across browsers and is not supported in older browsers^{This probably won't cause any trouble anymore nowadays}. It has a very unintuitive scoping mechanism and some other not so nice features. Also with javascript you have a harder time working with the result sets of these queries, which in many cases you might want to do. jQuery provides functions to work on them like: filter(), find(), children(), parent(), map(), not() and several more. Not to mention the jQuery ability to work with pseudo-class selectors.

However, I would not consider these things as jQuery's strongest features but other things like "working" on the dom (events, styling, animation & manipulation) in a crossbrowser compatible way or the ajax interface.

If you only want the selector engine from jQuery you can use the one jQuery itself is using: Sizzle That way you have the power of jQuerys Selector engine without the nasty overhead.

EDIT:
Just for the record, I'm a huge vanilla JavaScript fan. Nonetheless it's a fact that you sometimes need 10 lines of JavaScript where you would write 1 line jQuery.

Of course you have to be disciplined to not write jQuery like this:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

This is extremely hard to read, while the latter is pretty clear:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

The equivalent JavaScript would be far more complex illustrated by the pseudocode above:

1) Find the element, consider taking all element or only the first.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Iterate over the array of child nodes via some (possibly nested or recursive) loops and check the class (classlist not available in all browsers!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) apply the css style

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

This code would be at least two times as much lines of code you write with jQuery. Also you would have to consider cross-browser issues which will compromise the severe speed advantage (besides from the reliability) of the native code.

What is the difference between Sizzle and document.querySelectorAll

Sizzle is a pure-JavaScript CSS selector engine designed to be easily
dropped in to a host library.

Its a spin-off of jQuery project they say, but when it comes to differnce between jQuery and Sizzle, JQuery is a library build to simplify javascript complex syntax that people found hard to understand and get a grid of specially the begineers. So if you are using JQuery, there is going to be a lot of overhead along with it where as sizzlers offer comparatively less.

Its preferred to use querySelector over Sizzler because its just an added overhead which can very easily be done with VanillaJS so why waste it. They both do the same thing.

jQuery :has() equivalent using document.querySelector

As stated in the jquery documentation

Because :has() is a jQuery extension and not part of the CSS
specification, queries using :has() cannot take advantage of the
performance boost provided by the native DOM querySelectorAll() method

There is no native equivalent.

querySelectorAll in Jquery

$('li') will give you all of li element objects.

Please Check below example:-

$(document).ready(function(){  var data = [];  $('li').each(function(){    data.push($(this).text());  });
  console.log(data);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>    <li>new</li>    <li>howler monkey</li>    <li>pine marten</li></ul>

QuerySelector of javascript VS Find() of Jquery

querySelector is far more performant. It doesn't require a library nor the construction of a jQuery object.

Warning, the following will block your browser for a little bit, depending on your computer's specs:

const t0 = performance.now();for (let i = 0; i < 1e6; i++) {  const div = document.querySelector('div');}const t1 = performance.now();for (let i = 0; i < 1e6; i++) {  const div = $(document).find('div');}const t2 = performance.now();
console.log('querySelector: ' + (t1 - t0));console.log('jQuery: ' + (t2 - t1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>some div</div>

---

Related Topics