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

.querySelectorAll() в JavaScript

Автор

Дмитрий Нечаев

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

Что такое .querySelectorAll()?

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

Синтаксис

var elements = document.querySelectorAll(selector);
  • selector: Строка, содержащая CSS-селектор, по которому будет производиться поиск элементов.

Примеры использования

Давайте рассмотрим несколько примеров использования метода .querySelectorAll() с различными CSS-селекторами.

Пример 1: Выбор всех элементов

на странице и изменение их стилей.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример использования .querySelectorAll()</title>
</head>
<body>

<p>Первый параграф.</p>
<p>Второй параграф.</p>
<p>Третий параграф.</p>

<script>
// Выбор всех элементов <p> на странице
var paragraphs = document.querySelectorAll('p');

// Изменение стилей для каждого параграфа
paragraphs.forEach(function(paragraph) {
    paragraph.style.color = 'red';
});
</script>

</body>
</html>

Пример 2: Выбор всех элементов с классом "highlight" и добавление им класса "selected".

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример использования .querySelectorAll()</title>
<style>
    .highlight {
        background-color: yellow;
    }
    .selected {
        border: 2px solid blue;
    }
</style>
</head>
<body>

<p class="highlight">Первый параграф.</p>
<p>Второй параграф.</p>
<p class="highlight">Третий параграф.</p>

<script>
// Выбор всех элементов с классом "highlight"
var highlightedElements = document.querySelectorAll('.highlight');

// Добавление класса "selected" к найденным элементам
highlightedElements.forEach(function(element) {
    element.classList.add('selected');
});
</script>

</body>
</html>

Вывод

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

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

Все гайды по 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Как работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний