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

122

Закрыто . Этот вопрос основан на мнении . В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы на него можно было ответить с помощью фактов и цитат, отредактировав этот пост .

Закрыт 5 лет назад .

Уточните этот вопрос

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

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

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

javascript jquery dom

— идетToEleven
источник

Определите лучше. Они почти полностью разные.

Это все равно, что спросить: «Лучше ли гаечный ключ на один размер, чем на разводной?» Ответ: они являются более мощными и более гибкими, и поэтому во многих случаях превосходящих, но getElementByIdи getElementsByClassNameпо - прежнему идеально подходит для целей их имена описывают.

— lonesomeday

Да, и qS/qSAможет использоваться из любого контекста элемента, но gEBIможет использоваться только из documentконтекста.

getElementByIdсопоставляет idатрибуты для поиска узлов DOM при querySelectorпоиске по селекторам. Таким образом , в случае недопустимой селектора , например <div id="1"></div>, getElementById('1')будет работать , пока querySelector('#1')не удастся, если не сказать ему , чтобы соответствовать idатрибуту (например querySelector('[id="1"]').

— Samuel ELH

Просто FYI для тех , кто читает это, но querySelectorи querySelectorAllполностью поддерживаются. caniuse.com/#feat=queryselector

— Telarian

Ответы:

132

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

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

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

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

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

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

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

— Квентин
источник

Поддержка querySelector

— tazboy

@JasonVanDerMeijden - вряд ли будет значительным, вероятно, будет варьироваться от браузера к браузеру.

— Квентин

Очень хороший ответ, и вот несколько тестов производительности

— angel.bonev

почему лучше поддерживается порядок: getElementById> querySelector> getElementsByClassName, потому что я думал , что getElementsByClassNameдолжен иметь такой же уровень поддержки , как getElementById?

— Лэй Ян

Этот ответ, похоже, не затрагивает разницу между методами, особенно с точки зрения производительности.

— Dror Bar

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

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

— Тьяго Негри
источник

@thomas ваша ссылка не работает. Есть ли где нибудь рабочая ссылка?

— user5508297 04

Есть несколько заархивированных версий: web.archive.org/web/20160108040024/http://jsperf.com/ ... Но на самом деле тест очень старый (2010 г.), поэтому результат может сильно отличаться от более современных движков.

— Томас

На самом деле заархивированная страница является динамической и позволяет повторно запустить тест в вашем текущем браузере. 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, но в первом случае он жив, а во втором это снимок.

— У. Принс,