Какая разница между 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) должен возвращать статический результат выполнения области действия - сопоставить селекторам селекторов с объектом контекста.
Ответы
Ответ 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.
