Javascript querySelector и getElementById [закрыто]

122

Я слышал, что querySelector& querySelectorAll- это новые методы выбора DOMэлементов. Как они соотносятся со старыми методами getElementByIdи getElementsByClassNameс точки зрения производительности и поддержки браузера?

Как производительность сравнивается с использованием селектора запросов jQuery?

Есть ли рекомендации по выбору нативного набора?

javascript jquery dom идетToEleven
источник
1
Определите лучше. Они почти полностью разные.
4
Это все равно, что спросить: «Лучше ли гаечный ключ на один размер, чем на разводной?» Ответ: они являются более мощными и более гибкими, и поэтому во многих случаях превосходящих, но getElementByIdи getElementsByClassNameпо - прежнему идеально подходит для целей их имена описывают.
lonesomeday
2
Да, и qS/qSAможет использоваться из любого контекста элемента, но gEBIможет использоваться только из documentконтекста.
3
getElementByIdсопоставляет idатрибуты для поиска узлов DOM при querySelectorпоиске по селекторам. Таким образом , в случае недопустимой селектора , например <div id="1"></div>, getElementById('1')будет работать , пока querySelector('#1')не удастся, если не сказать ему , чтобы соответствовать idатрибуту (например querySelector('[id="1"]').
Samuel ELH
3
Просто FYI для тех , кто читает это, но querySelectorи querySelectorAllполностью поддерживаются. caniuse.com/#feat=queryselector
Telarian

Ответы:

132

«Лучше» - это субъективно.

querySelector это более новая функция.

getElementByIdлучше поддерживается чем querySelector.

querySelectorлучше поддерживается чем getElementsByClassName.

querySelectorпозволяет находить элементы с правилами, которые нельзя выразить с помощью getElementByIdиgetElementsByClassName

Вам нужно выбрать подходящий инструмент для каждой конкретной задачи.

(В приведенном выше тексте для querySelectorчтения querySelector/ querySelectorAll).

Квентин
источник
8
Поддержка querySelector
tazboy
2
@JasonVanDerMeijden - вряд ли будет значительным, вероятно, будет варьироваться от браузера к браузеру.
Квентин
2
Очень хороший ответ, и вот несколько тестов производительности
angel.bonev
почему лучше поддерживается порядок: getElementById> querySelector> getElementsByClassName, потому что я думал , что getElementsByClassNameдолжен иметь такой же уровень поддержки , как getElementById?
Лэй Ян
Этот ответ, похоже, не затрагивает разницу между методами, особенно с точки зрения производительности.
Dror Bar
43

Функции getElementByIdи getElementsByClassNameочень специфичны, а функции querySelectorи querySelectorAllболее проработаны. Я предполагаю, что у них действительно будет худшая производительность.

Кроме того, вам необходимо проверить поддержку каждой функции в браузерах, на которые вы ориентируетесь. Чем он новее, тем выше вероятность отсутствия поддержки или "глючности" функции.

Тьяго Негри
источник
@thomas ваша ссылка не работает. Есть ли где нибудь рабочая ссылка?
user5508297 04
6
Есть несколько заархивированных версий: web.archive.org/web/20160108040024/http://jsperf.com/ ... Но на самом деле тест очень старый (2010 г.), поэтому результат может сильно отличаться от более современных движков.
Томас
4
На самом деле заархивированная страница является динамической и позволяет повторно запустить тест в вашем текущем браузере. querySelectorAll по-прежнему работает в моем браузере примерно на 37% медленнее. (Chrome 71 - vgy.me/TwGL3o.png ) Также стоит отметить, что getElementById возвращает живой результат, что означает, что если вы измените DOM, это изменение будет отражено результатом, полученным getElementByID (если он находится в области видимости), тогда как nodelist Возвращаемый querySelectorAll является моментальным снимком, например, поскольку все было в момент выполнения вызова, результат не будет отражать последующие изменения в DOM.
W.Prins
nodelist ... is not liveвы можете предоставить для этого документацию? @ W.Prins оба метода возвращают Elementтип.
Максимилиан Бёрсли
А, я вижу, что допустил опечатку, примите мои извинения! Я должен был написать «getElementsByClassName», где я написал «getElementByID», например, это getElementsByClassName (и аналогичные), который возвращает набор результатов в реальном времени ». Действительно, как getElementsByClassName, так и querySelectorAll возвращают NodeList, но в первом случае он жив, а во втором это снимок.
У. Принс,