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

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

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

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

query & queryAll

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

пусть s-результат анализа относительного селектора из relativeSelectors против set. [Селекторы]

Если s-ошибка, бросьте JavaScript TypeError.

возвращает результат оценки селектора S с помощью: набор элементов области. [Селекторы]

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

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

querySelector & querySelectorAll

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

пусть s-результат разбора селекторов селекторов. [Селекторы]

Если s-ошибка, бросьте JavaScript TypeError.

верните результат оценки селектора s против корня узла, используя корневой узел области и метод области-отфильтрованный. [СЕЛЕКТОРЫ.]

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

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

15
dom javascript selectors-api

2 ответов

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() также возвращает static NodeList, поэтому они все еще не полностью идентичны.

10

обновление 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 встроенных модулей не будут реализованы в браузерах, и даже тогда вряд ли будет возвращен массив live Elements [], как описано в ответ BoltClock.

поддержка браузеров

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

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

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

caniuse.com/queryselector (См.:http://caniuse.com/queryselector для обновления info)

нет никакой информации о поддержке query и queryAll.

Подробнее

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

15