В мире веб-разработки управление объектной моделью документа (DOM) является важнейшим навыком. Один из самых мощных инструментов в вашем распоряжении — это комбинация метода querySelectorAllи свойства textContent. В этой статье мы рассмотрим эти два метода и предоставим вам множество удобных методов, позволяющих максимально эффективно использовать их. Так что хватайте редактор кода и приступайте!

1. Выбор элементов с помощью querySelectorAll:
   Метод querySelectorAllпозволяет выбирать несколько элементов из DOM, используя синтаксис селектора CSS. Он возвращает NodeList, который представляет собой объект, подобный массиву, содержащий все соответствующие элементы. Вот пример:

const elements = document.querySelectorAll('.my-class');

textContent

const element = document.querySelector('.my-element');
console.log(element.textContent);

Вы также можете использовать textContentдля изменения текстового содержимого элемента. Вот пример обновления содержимого элемента абзаца:

const paragraph = document.querySelector('p');
paragraph.textContent = 'Hello, world!';

Объединение querySelectorAllи textContentпозволяет фильтровать элементы по их текстовому содержимому. Например, выделим все абзацы, содержащие слово “JavaScript”:

const paragraphs = document.querySelectorAll('p');
const jsParagraphs = Array.from(paragraphs).filter(p => p.textContent.includes('JavaScript'));

5. Подсчет количества элементов.
   Если вы хотите узнать, сколько элементов соответствует определенному селектору, вы можете использовать свойство lengthсписка NodeList, возвращаемого querySelectorAll. Вот пример:

const elementCount = document.querySelectorAll('.my-class').length;
console.log(`There are ${elementCount} elements with the class 'my-class'.`);

Освоив метод querySelectorAllи свойство textContent, вы получите мощные инструменты для управления DOM в своих проектах веб-разработки. Независимо от того, выбираете ли вы элементы, извлекаете или изменяете их текстовое содержимое или фильтруете по определенным критериям, эти методы помогут вам стать более эффективными и продуктивными. Так что вперед, экспериментируйте с ними и поднимите свои навыки фронтенд-разработки на новый уровень!