логотип PurpleSchool
логотип PurpleSchool

.querySelectorAll() в JavaScript

Автор

Дмитрий Фандорин

.querySelectorAll() - это метод JavaScript, который позволяет получить все элементы на веб-странице, соответствующие заданному CSS-селектору. Он используется для того, чтобы получить ссылки на все элементы и работать с ними в JavaScript.

Форма записи

.querySelectorAll() имеет следующий синтаксис:

document.querySelectorAll(cssSelector);

где:

  • cssSelector
    • это строка, содержащая CSS-селектор, по которому мы ищем элементы.

Пример использования .querySelectorAll() для получения ссылок на все элементы с классом myClass:

<div class="myClass">Это мой элемент 1</div>
<div class="myClass">Это мой элемент 2</div>
<p>Это не мой элемент</p>
const elements = document.querySelectorAll('.myClass');
for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = 'red';
}

В данном примере мы используем метод .querySelectorAll() для получения ссылок на все элементы с классом myClass, а затем изменяем их цвет текста на красный.

Описание работы

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

Пример использования .querySelectorAll() для получения ссылок на все элементы с тегом div:

<div>Это мой элемент 1</div>
<div>Это мой элемент 2</div>
<p>Это не мой элемент</p>
const elements = document.querySelectorAll('div');
for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = 'red';
}

В данном примере мы используем CSS-селектор div для поиска всех элементов с тегом div, а затем изменяем их цвет текста на красный.

Заключение

.querySelectorAll() - это метод JavaScript, который позволяет получить все элементы на веб-странице, соответствующие заданному CSS-селектору. Он используется для того, чтобы получить ссылки на все элементы и работать с ними в JavaScript.

Стрелочка влево.removeProperty() в JavaScript.querySelector() в JavaScriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.8
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

TypeScript с нуля

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

Next.js - с нуля

Антон Ларичев
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее