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