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

Метод 1: выбор по имени тега

const lists = document.querySelectorAll('ul');

Этот метод выбирает все элементы <ul>на странице и возвращает NodeList, содержащий все соответствующие элементы.

Метод 2: выбор по имени класса

const lists = document.querySelectorAll('.list');

С помощью этого метода вы можете выбрать все элементы с именем класса «список» и сохранить их в переменной lists.

Метод 3: выбор по атрибуту

const links = document.querySelectorAll('a[href^="https://"]');

Здесь мы выбираем все элементы <a>, атрибут «href» которых начинается с «https://».

Метод 4: выбор с помощью нескольких селекторов

const elements = document.querySelectorAll('h1, h2, h3');

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

Метод 5: выбор вложенных элементов

const listItems = document.querySelectorAll('ul li');

Этот метод выбирает все элементы <li>, которые являются потомками элемента <ul>.

Метод 6: выбор на основе позиции

const firstTwoItems = document.querySelectorAll('li:nth-child(-n+2)');

Этот метод выбирает первые два элемента <li>внутри их родительского элемента.

Метод 7: выбор с использованием псевдоклассов

const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');

Здесь мы устанавливаем все отмеченные флажки на странице.

Метод querySelectorAllпредоставляет гибкий и эффективный способ выбора нескольких элементов в JavaScript. Используя различные селекторы и методы CSS, вы можете сузить выбор в соответствии с конкретными требованиями. Понимание этих методов повысит ваши способности эффективно манипулировать DOM и создавать динамические веб-интерфейсы.