javascript - When to use querySelectorAll - Stack Overflow

admin管理员组

文章数量:1022853

In a piece of example code I wrote

var as = toArray(document.getElementsByClassName("false")).filter(function (el) {
    return el.tagName === "A";
});

And I was thinking I could replace that with

var as = document.querySelectorAll("a.false");

Now after reading the following facts

• Pretend browser support isn't an issue (we have shims and polyfills).
• Pretend your not in your generic jQuery mindset of you shall use QSA for getting every element.
• I'm going to write qsa instead of document.querySelectorAll because I'm lazy.

Question: When should I favour QSA over the normal methods?

It's clear that if your doing qsa("a") or qsa(".class") or qsa("#id") your doing it wrong because there are methods (byTagName, byClassName, byId) that are better.

It's also clear that qsa("div > p.magic") is a sensible use-case.

Question: But is qsa("tagName.class") a good use-case of QSA?

As a futher aside there are also these things called NodeIterator

I've asked a question about QSA vs NodeIterator

In a piece of example code I wrote

var as = toArray(document.getElementsByClassName("false")).filter(function (el) {
    return el.tagName === "A";
});

And I was thinking I could replace that with

var as = document.querySelectorAll("a.false");

Now after reading the following facts

• Pretend browser support isn't an issue (we have shims and polyfills).
• Pretend your not in your generic jQuery mindset of you shall use QSA for getting every element.
• I'm going to write qsa instead of document.querySelectorAll because I'm lazy.

Question: When should I favour QSA over the normal methods?

It's clear that if your doing qsa("a") or qsa(".class") or qsa("#id") your doing it wrong because there are methods (byTagName, byClassName, byId) that are better.

It's also clear that qsa("div > p.magic") is a sensible use-case.

Question: But is qsa("tagName.class") a good use-case of QSA?

As a futher aside there are also these things called NodeIterator

I've asked a question about QSA vs NodeIterator

• javascript
• dom
• qsa
• dom4

Share Improve this question Follow edited May 23, 2017 at 12:09 CommunityBot 111 silver badge asked Oct 29, 2011 at 19:32 RaynosRaynos 170k5757 gold badges357357 silver badges398398 bronze badges 4

• As an aside NodeIterator is really slow – Raynos Commented Oct 29, 2011 at 19:49
• 1 Well, I'd say that until getElementsByTagNameAndClassName() bees available, querySelectorAll("a.false") makes sense and is more readable than a chained call from toArray() to filter(). – Frédéric Hamidi Commented Oct 29, 2011 at 20:07
• @FrédéricHamidi an additional call to .filter is also slow as hell. – Raynos Commented Oct 29, 2011 at 20:11
• Indeed, and, until an hypothetical getElementsByTagNameAndClassName() manifests itself, you don't have much choice outside of querySelectorAll(), do you? – Frédéric Hamidi Commented Oct 29, 2011 at 20:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You should use QSA when the gEBI, gEBN, gEBCN do not work because your selector is plex.

QSA vs DOM parsing is a matter of preference and what your going to be doing with the returned data set.

If browser support was not an issue I would just use it everywhere. Why use 4 different methods (...byId, ...byTagName, ...byClassName) if you could just use one.

QSA seems to be slower (...byId), but still only takes a few miliseconds or less. Most of the times you only call it a few times, so not a problem. When you hit a speed bottleneck you could always replace QSA with the appropriate other one.

I've set up some tests for you to mess around with. It appears that QSA is a lot slower. But if you are not calling it that much, it shouldn't be a problem.

http://jsfiddle/mxZq3/

EDIT - jsperf version

http://jsperf./qsa-vs-regular-js

In a piece of example code I wrote

var as = toArray(document.getElementsByClassName("false")).filter(function (el) {
    return el.tagName === "A";
});

And I was thinking I could replace that with

var as = document.querySelectorAll("a.false");

Now after reading the following facts

• Pretend browser support isn't an issue (we have shims and polyfills).
• Pretend your not in your generic jQuery mindset of you shall use QSA for getting every element.
• I'm going to write qsa instead of document.querySelectorAll because I'm lazy.

Question: When should I favour QSA over the normal methods?

It's clear that if your doing qsa("a") or qsa(".class") or qsa("#id") your doing it wrong because there are methods (byTagName, byClassName, byId) that are better.

It's also clear that qsa("div > p.magic") is a sensible use-case.

Question: But is qsa("tagName.class") a good use-case of QSA?

As a futher aside there are also these things called NodeIterator

I've asked a question about QSA vs NodeIterator

In a piece of example code I wrote

var as = toArray(document.getElementsByClassName("false")).filter(function (el) {
    return el.tagName === "A";
});

And I was thinking I could replace that with

var as = document.querySelectorAll("a.false");

Now after reading the following facts

• Pretend browser support isn't an issue (we have shims and polyfills).
• Pretend your not in your generic jQuery mindset of you shall use QSA for getting every element.
• I'm going to write qsa instead of document.querySelectorAll because I'm lazy.

Question: When should I favour QSA over the normal methods?

It's clear that if your doing qsa("a") or qsa(".class") or qsa("#id") your doing it wrong because there are methods (byTagName, byClassName, byId) that are better.

It's also clear that qsa("div > p.magic") is a sensible use-case.

Question: But is qsa("tagName.class") a good use-case of QSA?

As a futher aside there are also these things called NodeIterator

I've asked a question about QSA vs NodeIterator

• javascript
• dom
• qsa
• dom4

Share Improve this question Follow edited May 23, 2017 at 12:09 CommunityBot 111 silver badge asked Oct 29, 2011 at 19:32 RaynosRaynos 170k5757 gold badges357357 silver badges398398 bronze badges 4

• As an aside NodeIterator is really slow – Raynos Commented Oct 29, 2011 at 19:49
• 1 Well, I'd say that until getElementsByTagNameAndClassName() bees available, querySelectorAll("a.false") makes sense and is more readable than a chained call from toArray() to filter(). – Frédéric Hamidi Commented Oct 29, 2011 at 20:07
• @FrédéricHamidi an additional call to .filter is also slow as hell. – Raynos Commented Oct 29, 2011 at 20:11
• Indeed, and, until an hypothetical getElementsByTagNameAndClassName() manifests itself, you don't have much choice outside of querySelectorAll(), do you? – Frédéric Hamidi Commented Oct 29, 2011 at 20:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You should use QSA when the gEBI, gEBN, gEBCN do not work because your selector is plex.

QSA vs DOM parsing is a matter of preference and what your going to be doing with the returned data set.

If browser support was not an issue I would just use it everywhere. Why use 4 different methods (...byId, ...byTagName, ...byClassName) if you could just use one.

QSA seems to be slower (...byId), but still only takes a few miliseconds or less. Most of the times you only call it a few times, so not a problem. When you hit a speed bottleneck you could always replace QSA with the appropriate other one.

I've set up some tests for you to mess around with. It appears that QSA is a lot slower. But if you are not calling it that much, it shouldn't be a problem.

http://jsfiddle/mxZq3/

EDIT - jsperf version

http://jsperf./qsa-vs-regular-js

本文标签： javascriptWhen to use querySelectorAllStack Overflow