Разница между querySelector() и querySelectorAll()[0]

Question

Я наткнулся на некоторый код JS, используя следующее, чтобы выбрать первый из нескольких узлов.

querySelectorAll()[0]

Разве следующее не делает то же самое?

querySelector()

Есть ли преимущество использования querySelectorAll()[0]?

Answer 1

Оба выражения вернут один и тот же результат.

Единственная разница заключается в querySelectorAll()[0] сначала найдет все элементы, соответствующие селектору, а затем проиндексирует первый элемент. В то время как querySelector() будет "короткое замыкание", как только он найдет первый элемент.

Итак, теоретически querySelector() может быть немного более эффективным, чем querySelectorAll()[0], Однако их поведение идентично.

Answer 2

Они оба приводят к одному и тому же, но они идут разными путями (в прямом и переносном смысле), чтобы добраться туда. В вашем примере .querySelector() правильный подход, потому что .querySelectorAll() Это приведет к увеличению производительности при сканировании всего элемента, который вызывается методом, когда ему нужно только использовать первое совпадение.

Преимущество для .querySelectorAll() заключается в том, что вы можете кэшировать ссылку на весь набор соответствующих элементов, а затем индексировать их или зацикливать их при необходимости позже. Итак, если возникла необходимость в первом подобранном элементе, но весь набор понадобится где-то еще в коде, то .querySelectorAll(<<selector>>)[0] будет иметь смысл.