Search code examples
javascriptdomqsadom4

When to use querySelectorAll

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

Solution

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

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