В JavaScript « ЗапросСелекторВсе() » извлекает самый первый элемент, который точно соответствует указанным селекторам CSS. Этот метод начинает обход дерева DOM для выполнения этой задачи. Как только элемент найден, он применяет встроенные свойства или методы JavaScript, определенные в разделе сценария, для выполнения специальных задач. Этот метод обычно используется для выбора целевых элементов в соответствии с требованиями. Это позволяет пользователям выбирать все элементы, которые соответствуют указанному селектору или конкретному элементу, помещенному в данный индекс.
В этом руководстве показано использование метода «querySelectorAll()» в JavaScript.
Как использовать метод «querySelectorAll()» в JavaScript?
Чтобы использовать « ЗапросСелекторВсе() ”, укажите селектор CSS в качестве его аргумента. Селекторы CSS включают «Тип, класс и идентификатор». Если селектор CSS недействителен, он возвращает синтаксическую ошибку, в противном случае он возвращает статический объект NodeList в качестве стандартного вывода.
Синтаксис
документ.querySelectorAll ( Селекторы CSS )
В приведенном выше синтаксисе « Селекторы CSS ” относятся ко всем допустимым селекторам CSS.
Давайте используем определенный выше синтаксис на практике.
HTML-код
Обзор данного HTML-кода:
< h2 сорт '=' 'демо' > Первый заголовок h2 >< h3 сорт '=' 'демо' > Второй заголовок h3 >
< п сорт '=' 'демо' > Первый параграф п >
< п сорт '=' 'демо' > Второй абзац п >
< кнопка по щелчку '=' 'jsFunc()' > Кликните сюда ! кнопка >
В приведенных выше строках кода:
- “ » добавляет подзаголовок с классом «демо».
- “ » определяет второй подзаголовок того же класса с именем «demo».
- “ » встраивают операторы абзаца, имеющие один и тот же класс, т. е. «демо».
- “ <кнопка> » включает новую кнопку с событием мыши «onclick» для выполнения функции «jsFunc()».
Примечание: Конкретный HTML-код используется в этом руководстве.
Пример 1. Применение метода «querySelectorAll()» для выбора элементов одного класса и изменения их цвета
В этом примере используется метод «querySelectorAll()» для выбора всех элементов, использующих «демонстрационный» класс.
JavaScript-код
Давайте рассмотрим приведенный ниже код:
< сценарий >функция jsFunc ( ) {
список констант = document.querySelectorAll ( '.демо' ) ;
для ( позволять я = 0 ; я < список.длина; я++ ) {
список [ я ] .стиль.цвет = 'Оранжево-красный' ;
}
}
сценарий >
В приведенных выше строках кода:
- “ jsFunc() функция определена.
- В своем определении переменная «список» использует « ЗапросСелекторВсе() », чтобы выбрать все элементы, имеющие класс «демо».
- Далее « для » инициализирует список узлов для перебора всех найденных элементов HTML, имеющих класс « демо ' и измените цвет их текста с помощью ' стиль.цвет ' свойство.
Выход
В приведенном выше выводе видно, что цвет текста элементов, содержащих одно и то же имя класса, то есть «демо», изменяется при нажатии кнопки.
Пример 2. Применение метода «querySelectorAll()» для выбора конкретных проиндексированных элементов
Помимо всех элементов, пользователь также может выбрать конкретный индексированный элемент, имеющий класс «демо».
JavaScript-код
Рассмотрим данный код JavaScript:
< сценарий >функция jsFunc ( ) {
список констант = document.querySelectorAll ( 'h2.demo' ) ;
список [ 0 ] .стиль.цвет = 'зеленый' ;
}
сценарий >
В приведенном выше фрагменте кода:
- Переменная «список» выбирает элемент «h2», класс которого «демонстрационный», с помощью « ЗапросСелекторВсе() метод.
- После этого в переменной «list» указывается индекс элемента «h2», чтобы изменить цвет текста элемента «H2», помещенного в индекс «0».
Выход
Вывод показывает, что цвет текста элемента «H2», помещенного в нулевой индекс, имеет класс «demo», измененный при нажатии кнопки.
Пример 3. Применение метода «querySelectorAll()» для получения количества элементов одного класса
В этом примере извлекается количество элементов одного класса с помощью метода querySelectorAll().
HTML-код
Во-первых, взгляните на измененный HTML-код «Примера 1»:
< п идентификатор '=' 'для' > п >
В приведенном выше HTML-коде добавьте пустой абзац с идентификатором «para» в конце HTML-кода «Пример 1».
JavaScript-код
Теперь продолжим с кодом JavaScript:
< сценарий >функция jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'ч3' ) ;
документ.getElementById ( 'для' ) .innerHTML = список узлов.длина;
}
сценарий >
Согласно приведенному выше фрагменту кода:
- Функция «jsFunc()» сначала выбирает все элементы «
», используя « ЗапросСелекторВсе() метод.
- После этого « получитьэлемент по идентификатору() » обращается к добавленному пустому абзацу через его идентификатор «para», чтобы добавить к нему возвращаемое значение примененного свойства «length».
Выход
Как видно, приведенный выше вывод показывает всего «4» элемента, которые соответствуют указанному селектору класса CSS «demo».
Заключение
“ ЗапросСелекторВсе() ” можно легко использовать, указав селектор CSS в качестве его значения. Этот метод сопоставляет каждый элемент HTML и выбирает те, которые соответствуют указанному селектору. Как только элементы выбраны, он выполняет над ними требуемую задачу, определенную в разделе сценария. В этом руководстве кратко показано использование метода «querySelectorAll()» в JavaScript.