QuerySelectorAll: мощный инструмент для работы с CSS-селекторами

querySelectorAll - это метод, который доступен в объекте Document и позволяет получить все элементы, соответствующие определенному CSS-селектору внутри документа. Этот метод возвращает коллекцию NodeList, которую можно использовать для манипуляции с найденными элементами.

Преимуществом метода querySelectorAll является его гибкость. Он позволяет нам выбрать не только элементы по тегу или классу, но и по идентификатору, а также использовать комбинированные селекторы.

Пример использования метода querySelectorAll:

// Найти все элементы с классом "example"
const elements = document.querySelectorAll('.example');
console.log(elements); // NodeList с найденными элементами

// Найти все элементы с тегом "p" и классом "red"
const paragraphs = document.querySelectorAll('p.red');
console.log(paragraphs);

// Найти все элементы с идентификатором "myDiv" внутри элемента с идентификатором "container"
const container = document.querySelector('#container');
const divs = container.querySelectorAll('#myDiv');
console.log(divs);

В приведенных примерах мы использовали основные типы селекторов: классы, теги и идентификаторы. Однако есть и другие возможности querySelectorAll, например, комбинированные селекторы.

// Найти все элементы с классом "example" и тегом "a"
const links = document.querySelectorAll('a.example');
console.log(links);

// Найти все элементы с классом "example" внутри элемента с идентификатором "container"
const container = document.querySelector('#container');
const nestedElements = container.querySelectorAll('.example');
console.log(nestedElements);

Метод querySelectorAll возвращает NodeList, который, по сути, является частично упорядоченной коллекцией элементов. NodeList похож на массив, но не имеет всех его методов. Однако мы можем преобразовать его в массив для удобного использования:

const elements = document.querySelectorAll('.example');
const array = Array.from(elements);
console.log(array); // Массив с найденными элементами

// Или, используя оператор распространения:
const spreadArray = [...elements];
console.log(spreadArray);

Кроме того, c помощью метода forEach мы можем перебрать найденные элементы NodeList и выполнить определенное действие над каждым из них:

const elements = document.querySelectorAll('.example');
elements.forEach((element) => {
  // Выполнить действие над каждым элементом
  console.log(element);
});

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