Когда использовать querySelectorAll - PullRequest
9 голосов
/ 29 октября 2011

В примере кода, который я написал

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

И я думал, что смогу заменить это на

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

Теперь, прочитав следующие факты

  • Притворись, что поддержка браузера не проблема (у нас есть прокладки и полифилы).
  • Притворись, что ты не в своем общем jQuery-образе мышления, ты будешь использовать QSA для получения каждого элемента.
  • Я собираюсь написать qsa вместо document.querySelectorAll, потому что я ленивый.

Вопрос: Когда я должен отдавать предпочтение QSA по сравнению с обычными методами?

Понятно, что если вы делаете qsa("a") или qsa(".class") или qsa("#id"), вы делаете это неправильно, потому что есть методы (byTagName, byClassName, byId), которые лучше.

Также ясно, что qsa("div > p.magic") - разумный вариант использования.

Вопрос: Но является ли qsa("tagName.class") хорошим вариантом использования QSA?

Кроме того, есть и такие вещи, которые называются NodeIterator

Я задал вопрос о QSA vs NodeIterator

Ответы [ 3 ]

2 голосов
/ 07 ноября 2011

Вы должны использовать QSA, когда gEBI, gEBN, gEBCN не работают, поскольку ваш селектор сложен.

QSA по сравнению с анализом DOM - вопрос предпочтений и того, что вы собираетесь делать с возвращенным набором данных.

1 голос
/ 30 октября 2011

Если бы поддержка браузера не была проблемой, я бы просто использовал ее везде. Зачем использовать 4 разных метода (... byId, ... byTagName, ... byClassName), если вы можете просто использовать один.

QSA кажется медленнее (... byId ), но все же занимает всего несколько миллисекунд или меньше. В большинстве случаев вы называете это только несколько раз, так что это не проблема. Когда вы сталкиваетесь с узким местом в скорости, вы всегда можете заменить QSA соответствующим другим.

0 голосов
/ 30 октября 2011

Я настроил несколько тестов, чтобы вы могли бездельничать.Похоже, что QSA намного медленнее.Но если вы не называете это так часто, это не должно быть проблемой.

http://jsfiddle.net/mxZq3/

РЕДАКТИРОВАТЬ - jsperf версия

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

...