Подтвердить что ты не робот

Какая разница между queryAll и querySelectorAll

Определения из стандарта DOM кажутся почти такими же, и я не понимаю разницы.

В чем разница между queryAll и querySelectorAll.

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

query и queryAll

Чтобы сопоставить относительные селекторные строки relativeSelectors против набора, выполните следующие шаги:

Пусть s является результатом разбора относительного селектора от относительных селекторов против множества. [СЕЛЕКТОРЫ]

Если s является ошибкой, введите JavaScript TypeError.

Возвращает результат вычисления селектора с использованием: набора элементов. [СЕЛЕКТОРЫ]

Метод query (relativeSelectors) должен возвращать первый результат выполнения, соответствующий относительной селекторной строке relativeSelectors, против набора, состоящего из объекта контекста, и null, если результатом является пустой список.

Метод queryAll (relativeSelectors) должен возвращать массив элементов, инициализированный с результатом выполнения, сопоставлять относительную селекторную строку relativeSelectors с множеством, состоящим из объекта контекста.

querySelector и querySelectorAll

Чтобы скомпоновать селекторные селектора селекторов против node, выполните следующие действия:

Пусть s является результатом разбора селекторов селектора. [СЕЛЕКТОРЫ]

Если s является ошибкой, введите JavaScript TypeError.

Возвращает результат вычисления селектора s с корнем node с использованием корневого указателя node и метода определения области видимости. [СЕЛЕКТОРЫ].

Метод querySelector (selectors) должен возвращать первый результат выполнения области действия - сопоставлять селекторные строки селекторов против объекта контекста и null, если в противном случае результат будет пустым.

Метод querySelectorAll (selectors) должен возвращать статический результат выполнения области действия - сопоставить селекторам селекторов с объектом контекста.

4b9b3361

Ответ 1

query() и queryAll() принимают относительную селекторную строку, тогда как querySelector() и querySelectorAll() этого не делают. Относительный селектор - это в основном селектор, который может быть частичным и начинаться с комбинатора:

var parentNode = document.getElementById('parentNode'); // document.querySelector('#parentNode');

// Find .childNode elements that are direct descendants (children) of parentNode
// This cannot be done with querySelectorAll() using the existing reference to parentNode
parentNode.queryAll('> .childNode');
// querySelectorAll does allow getting all descendants of parentNode though
parentNode.querySelectorAll('.childNode');

Но что более важно, queryAll() возвращает массив live Elements[], тогда как NodeList, возвращаемый querySelectorAll(), является статичным, что означает, что узлы в этом списке не обновляются при внесении изменений в соответствующие DOM-элементы.

В терминах их функциональности query() и queryAll() могут быть более похожи на find() и findAll(), определенные в Селектор API уровня 2 - где вы также найдете определение относительного селектора - поскольку обе группы методов принимают и работают с относительными селекторами. Обратите внимание, что findAll() также возвращает статический NodeList, поэтому они все еще не полностью идентичны.

Ответ 2

Обновление 2016

queryAll был удален из спецификации DOM

В настоящее время наиболее важным различием между queryAll и querySelectorAll является то, что queryAll (а также query) был удален из спецификации DOM.

Текущая версия спецификации DOM доступна по адресу:

Примечание: https://www.w3.org/TR/dom/ - устаревшая версия стандарта DOM (см. отслеживание вилок на WHATWG Wiki и комментарий Доменика для получения дополнительной информации).

Последнее упоминание

Последняя версия, которая включала query и queryAll, была опубликована 15 марта 2016 года:

Удаление

В следующей версии не упоминается query или queryAll где угодно:

Текущая спецификация

Все события query или queryAll в стандарте DOM были прокомментированы Анной ван Кестерен 29 марта 2016 года.

В текущей спецификации DOM (по состоянию на июль 2016 года) не упоминается query или queryAll вообще:

querySelector и querySelectorAll находятся в разделе 4.2.6 Mixin ParentNode.

Кажется, что в настоящее время единственным надежным API является querySelector и querySelectorAll (см. этот ответ для более подробной информации) и в соответствии с это обсуждение GitHub query и queryAll не будут доступны до тех пор, пока в браузерах не будет реализована подкласса встроенных модулей JavaScript, и даже тогда она вряд ли вернет массив живых элементов [], как описано в ответ BoltClock.

Поддержка браузера

По состоянию на июнь 2016 года не упоминается query и queryAll в MDN:

С другой стороны, querySelector и querySelectorAll хорошо документированы и широко поддерживаются:

Поддержка браузера querySelector/querySelectorAll в соответствии с Могу ли я использовать с июня 2016 года:

caniuse.com/queryselector (Смотрите: http://caniuse.com/queryselector для актуальной информации)

Информация о поддержке query и queryAll отсутствует.

Подробнее

См. также этот ответ для получения дополнительной информации об использовании и поддержке браузера querySelector и querySelectorAll.