Queryselectorall что возвращает

document.querySelector() и document.querySelectorAll() в JavaScript

Для работы с DOM (объектная модель документа) элементами на странице в JavaScript есть удобные методы, которые позволяют получать и далее манипулировать ими. Еще недавно активно использовалось 4 метода с помощью которых можно добраться до элементов:

• getElementsByClassName() — по именам классов;
• getElementsByTagName() — по имени тега;
• getElementsByName() — по значению атрибута name;
• getElementById() — по идентификатору (id) элемента.

Сегодня все эти методы заменили:

• querySelector()
• querySelectorAll()

querySelector()

querySelector() — это document метод, который возвращает первый элемент, соответствующий указанному селектору или группе селекторов. Если поиск не увенчался успехом возвращается значение null .

Синтаксис

 let element = document.querySelector(selectors); 

let element — для того, чтобы работать с полученными элементами, создаем переменную, куда и записываем полученные данные.

document — объект, который служит точкой входа для получения содержимого страницы.

querySelector — вызов метода.

selectors — перечень селекторов, на основе которых будет производиться поиск элементов.

 div >JavaScript/div> div >JS/div> span>Джава Скрипт/span> div name="attributeName">ECMAScript/div> script> let elementByClassName = document.querySelector('.class-name'); // доступ по классу let elementById = document.querySelector('#elemId'); // доступ по id let elementByTag = document.querySelector('span'); // доступ по тегу let elementByAttribute = document.querySelector('[name="attributeName"]'); // доступ по имени атрибута elementByClassName.innerHTML = "Манипулировать элементами на странице с помощью querySelector легко и удобно!"; elementById.innerHTML = "querySelector - это универсальный способ получения доступа к DOM элементам"; elementByTag.innerHTML = "С помощью innerHTML можно получать или менять содержимое элементов"; elementByAttribute.innerHTML = "Методы getElementsBy* считаются устаревшими"; /script> 

При работе с querySelector() мы можем указать несколько селекторов, их запись разнится в зависимости от задачи

 document.querySelector('.class-name#elemId'); // слитно, когда условие И (учесть оба селектора) document.querySelector('.class-name,#elemId'); // через запятую, когда ИЛИ document.querySelector('.class-name-1:not(#elemId1)'); // один селектор, но не другой XOR document.querySelector(':not(.class-name-1),:not(#elemId1)'); // ни тот ни другой NAND document.querySelector(':not(.class-name-1):not(#elemId1)'); // или ни тот или ни другой 

Также метод querySelector() позволяет получать первые и последние элементы в списке

 ul> li>li №1/li> li>li №2/li> li>li №3/li> /ul> script> let elementByFirstTag = document.querySelector('ul > li:first-child'); elementByFirstTag.innerHTML = 'Заменили текст в первом li в теге ul'; let elementByLastTag = document.querySelector('ul > li:last-child'); elementByLastTag.innerHTML = 'Заменили текст в последнем li в теге ul'; /script> 

querySelectorAll()

querySelectorAll() — это document метод, который возвращает коллекцию ( NodeList ) всех найденных элементов на странице, соответствующие указанному селектору или группе селекторов. Если поиск не увенчался успехом возвращается пустой NodeList .

 ul> li >li №1/li> li >li №2/li> li >li №3/li> /ul> div >div №1/div> script> let collectionOfelements = document.querySelectorAll('.class-name#elemId'); for (let i = 0; i < collectionOfelements.length; i++) < collectionOfelements[i].innerHTML = "Меняем текст в полученных элементах через цикл for"; >/script> 

Здесь мы получаем все элементы которые содержат класс class-name и id elemId и меняет текст в них через цикл for .

querySelectorAll() возвращает статическую (non-live) коллекцию элементов. Если после вызова метода на странице появились еще элементы соответствующие прописанным селекторам и необходимо получить доступ и до них, querySelectorAll() нужно вызывать снова.

Ниже бегло рассмотрим устаревшие, но все еще поддерживаемые методы getElementsBy* , которые сегодня еще можно встретить, особенно в написанных давно проектах.

getElementById()

getElementById() — это document метод, который возвращает первый элемент, соответствующий указанному идентификатору ( id ). Если совпадений не найдено возвращается значение null .

 div >div/div> script> let elementById = document.getElementById('elemId') elementById.style.backgroundColor = 'yellow'; /script>  

getElementsByClassName()

getElementsByClassName() — это document метод, который возвращает коллекцию ( HTMLCollection ) всех найденных элементов на странице, соответствующие указанному классу или группе классов. Если поиск не увенчался успехом возвращается пустой HTMLCollection .

 div >element №1/div> div >element №2/div> div >element №3/div> script> let collectionOfelementsByClassName = document.getElementsByClassName('class-name-1 class-name-2') console.log(collectionOfelementsByClassName) /script>  

getElementsByTagName()

getElementsByTagName() — это document метод, который возвращает коллекцию ( HTMLCollection ) всех найденных элементов на странице, соответствующие указанному тегу. Если поиск не увенчался успехом возвращается пустой HTMLCollection .

 div>element №1/div> div>element №2/div> div>element №3/div> script> let collectionOfelementsByTagName = document.getElementsByTagName('div') console.log(collectionOfelementsByTagName); /script>  

Если вместо тега вставить звездочку ‘*’ метод вернет все элементы представленные на странице.

getElementsByName()

getElementsByName() — это document метод, который возвращает коллекцию ( NodeList ) всех найденных элементов на странице, соответствующие указанному атрибуту name . Если поиск не увенчался успехом возвращается пустой NodeList .

 div name="elemName">element №1/div> div name="elemName">element №2/div> div name="elemName">element №3/div> script> let collectionOfelementsByName = document.getElementsByName('elemName') console.log(collectionOfelementsByName); /script>  

Методы getElementsBy* возвращают «живые» коллекции, то есть они меняются в зависимости от изменения DOM. В свою очередь querySelectorAll() получает статическую коллекцию.

Итого

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

Методы getElementsBy* , также позволяют работать с DOM, однако считаются устаревшими и встречаются чаще в старом коде.

Skypro — научим с нуля

.query Selector All ( )

Получить все DOM-элементы, подходящие под CSS-селектор.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Метод определён для объекта document и любого HTML-элемента ( Element ) страницы. Позволяет найти все элементы по CSS-селектору среди дочерних. CSS-селектор передаётся в виде параметра. Этот метод используется в работе очень часто.

Возвращает похожую на массив статическую коллекцию Node List с найденными элементами. Если элементов не нашлось, то коллекция будет пустая, то есть с размером 0.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Метод принимает один параметр — CSS-селектор в виде строки. Например, можно выбрать все элементы внутри

     Князь Василий говорил всегда лениво, как актер говорит роль старой пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была преисполнена оживления и порывов.   Быть энтузиасткой сделалось её общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших её, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к её отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка, от которого она не хочет, не может и не находит нужным исправляться.   
Это параграф, дочерний для body  const paragraphs = document.querySelectorAll('div>p') console.log(paragraphs.length) // 2 // ищем несуществующий элемент const spanFromBody = document.querySelectorAll('span') console.log(spanFromBody.length) // 0   body> div> p> Князь Василий говорил всегда лениво, как актер говорит роль старой пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была преисполнена оживления и порывов. p> p> Быть энтузиасткой сделалось её общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших её, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к её отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка, от которого она не хочет, не может и не находит нужным исправляться. p> div> p>Это параграф, дочерний для bodyp> script> const paragraphs = document.querySelectorAll('div>p') console.log(paragraphs.length) // 2 // ищем несуществующий элемент const spanFromBody = document.querySelectorAll('span') console.log(spanFromBody.length) // 0 script> body>    Скопировать Скопировано Не удалось скопировать   

Динамический пример, введи селектор в поле поиска и «Искать»:

Как понять

Скопировать ссылку «Как понять» Скопировано

Метод работает с DOM, который связан с HTML-разметкой. Каждый HTML-элемент имеет родительские и дочерние элементы:

• Родители — это элементы, которые содержат текущий элемент. В примере выше у первого элемента есть два родительских элемента — и .
• Дочерние элементы — это элементы, которые содержит текущий элемент. Они могут быть, а могут не быть. Например, для тега все элементы страницы дочерние. У

  дочерний элемент — текст внутри тега.

Если вы работаете с корнем страницы (объектом document ), то поиск идёт по всем элементам страницы (от ), если от конкретного элемента, то поиск идёт только по всем дочерним.

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

�� Для получения коллекции из вообще всех элементов на странице в качестве аргумента нужно передать строку ‘*’ , её называют wildcard.

�� Метод возвращает статическую коллекцию. В отличие от методов get Elements By Tag Name ( ) и get Elements By Class Name ( ) , которые возвращают живые коллекции. Статическая коллекция не обновляется автоматически при появлении на странице новых элементов. Если нужны свежие данные, то придётся запустить поиск заново.

�� Результаты поиска можно безопасно обходить с помощью цикла.

Document.querySelectorAll()

Метод querySelectorAll() Document возвращает статический (не динамический) NodeList , содержащий все найденные элементы документа, которые соответствуют указанному селектору.

Примечание: Данный метод реализован на основе миксина ParentNode querySelectorAll() метода.

Синтаксис

= document.querySelectorAll(selectors); 

Параметры

Строка DOMString , содержащая один или более CSS селектор (en-US) . Эта строка должна быть валидным CSS селектором. Если это не так, то генерируется SyntaxError . Смотрите Поиск элементов DOM с использованием селекторов для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.

Примечание: Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты ( \ ). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри Escaping special characters.

Возвращаемое значение

Статический (non-live) NodeList , содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов, или пустой NodeList в случае отсутствия совпадений.

Примечание: Если в строке selectors содержатся CSS псевдоэлементы, то возвращаемый список будет всегда пуст.

Исключения

Исключение SYNTAX_ERR происходит в случае передачи некорректной группы селекторов.

Примеры

Получение списка совпадений

Чтобы получить NodeList всех элементов в документе:

var matches = document.querySelectorAll("p"); 

В этом примере возвращается список всех элементов в документе, которые имеют класс note или alert :

var matches = document.querySelectorAll("div.note, div.alert"); 

Здесь мы получаем список элементов

, чьим непосредственным родительским элементом является с классом highlighted , который расположен внутри контейнера с идентификатором test .

var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p"); 

В этом примере используются селекторы атрибутов, чтобы вернуть список элементов (en-US), которые содержат атрибут data-src :

var matches = document.querySelectorAll("iframe[data-src]"); 

Здесь селектор атрибута используется для возврата элементов списка, содержащихся в списке с идентификатором «userlist» , который имеет атрибут «data-active» со значением «1» :

var container = document.querySelector("#userlist"); var matches = container.querySelectorAll("li[data-active='1']"); 

Доступ к совпадениям

Вернув NodeList совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство length равно 0), то совпадений не было найдено.

В другом случае, вы можете использовать стандартную запись массива для доступа к содержимому. Вы можете использовать любой оператор зацикливания, например:

var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function (userItem)  deleteUser(userItem); >); 

Примечания пользователя

querySelectorAll() ведёт себя не так, как большинство библиотек JavaScript DOM. Это может привести к неожиданным результатам.

HTML

Рассмотрим этот HTML с тремя вложенными блоками.

div class="outer"> div class="select"> div class="inner">div> div> div> 

JavaScript

var select = document.querySelector(".select"); var inner = select.querySelectorAll(".outer .inner"); inner.length; // 1, не 0! 

В данном примере, когда мы выбрали «.outer .inner» в контексте с классом «select» , элемент с классом «.inner» был всё равно найден, хотя .outer не является потомком элемента в котором происходил поиск ( «.select» ). По умолчанию, querySelectorAll() проверяет только последний элемент без учёта контекста.

Псевдокласс :scope (en-US) даёт нам ожидаемый результат. Только соответствующие селекторы в потомках базового элемента:

var select = document.querySelector(".select"); var inner = select.querySelectorAll(":scope .outer .inner"); inner.length; // 0 

Спецификации

Specification
DOM Standard # ref-for-dom-parentnode-queryselectorall①

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Element.querySelector() and Element.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() (en-US) and DocumentFragment.querySelectorAll() (en-US)
• ParentNode.querySelector() and ParentNode.querySelectorAll()
• Code snippets for querySelector

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Методы querySelector и querySelectorAll

Раньше найти какой-то элемент на веб-странице при помощи JavaScript было не так просто. Были методы document.getElementById() , document.getElementsByTagName() и т. п.

Это было настолько неудобно и при этом требовалось так часто, что jQuery завоевал огромную популярность хотя бы за то, что при помощи него можно было искать элементы просто передав произвольный CSS-селектор в параметрах функции, например: $(‘ul.products li’) .

К счастью, в современном JS теперь тоже можно легко найти элементы по произвольному CSS-селектору без помощи сторонних библиотек.

Метод querySelector находит первый элемент, подходящий условию и возвращает его, а querySelectorAll находит все элементы и возвращает их список.

// Найдёт первый элемент с классом thumb на странице
var firstThumb = document.querySelector('.thumb'); // Найдёт все элементы с классом thumb на странице
var thumbs = document.querySelectorAll('.thumb'); // Найдёт все тэги LI вложенные в тег UL
var types = document.querySelectorAll('ul li');

Этот список очень похож на массив, даже при выводе через console.log() выглядит именно так. Но при этом он не является массивом. Например, у него нельзя вызвать метод map.

// Этот код выдаст ошибку
document.querySelectorAll('li').map(el => el.innerText);

Чтобы обойти этот недостаток, можно воспользоваться оператором расширения . из ES6.

// А вот такой код — сработает 
[. document.querySelectorAll('li')].map(el => el.innerText);

Искать элементы при помощи этих методов можно на всей странице или в конкретном элементе, который был найден ранее.

// Поиск всех тэгов P на странице
var paragraphsList = document.querySelectorAll(’p’);// Поиск всех тегов B внутри первого тега P, который мы нашли ранее
var b = paragraphsList[0].querySelectorAll(’b’);

В этих методах можно использовать почти любые CSS-селекторы, за исключением селекторов псевдо-селекторов ( :hover , ::after и т. п.).

Эти методы очень удобны при прототипировании. Например, при помощи них можно через консоль разработчика получить данные с любой веб-страницы, сохранить их в JSON и вставить в Sketch, сэкономив силы на создании контента.

Вот пример, в котором можно поиграться с кодом и опробовать метод на практике: