QuerySelector — це метод JavaScript, який відіграє важливу роль у пошуку елементів.
У цьому розділі ми розглянемо та обговоримо метод querySelector (), його використання, а також розглянемо приклад, щоб практично зрозуміти концепцію методу querySelector ().
Представляємо метод JavaScript querySelector ().
Метод інтерфейсу елемента, який дозволяє шукати та повертати перший елемент у документі. Він знаходить елемент, який відповідає будь-якому з указаних селекторів CSS або групи селекторів. Однак, якщо відповідний елемент не знайдено, він повертає значення null. Метод querySelector () є лише методом інтерфейсу Document. Інтерфейс документа — це інтерфейс, який описує загальні методи, а також властивості будь-якого документа html, XML або будь-якого іншого типу.
Як метод querySelector () виконує пошук
Ми знаємо, що існують різні типи пошуку, які можна використовувати для пошуку елементів. Однак метод querySelector () використовує глибина попереднього замовлення обхід вузлів документа. У ньому обхід починається з першого елемента в розмітці документа, а потім проходить через послідовні вузли в порядку кількості дочірніх вузлів.
час обіду проти вечері
Синтаксис
element = document.querySelector(selectors);
Метод querySelector () є методом інтерфейсу документа, тому він має такий синтаксис.
Він має один параметр, 'селектори', який є рядком DOM і містить один або кілька дійсних селекторів CSS.
Тип повернення
Він може повернути «null», якщо відповідності не знайдено, і якщо перший елемент відповідає вказаним селекторам CSS (якщо такі є), він поверне цей елемент.
масив рядків мовою c
Однак, якщо немає жодного дійсного селектора CSS, він викличе виняток 'SyntaxError'.
Тепер, перш ніж розглядати приклад реалізації, ми повинні знати про різні типи селекторів CSS. Якщо ви не в курсі, відвідайте наш https://www.javatpoint.com/css-selector розділ посібника з CSS.
Отже, ми зараз реалізуємо приклад, у якому ми розглянемо селектор CSS і збережемо значення його першого елемента за допомогою методу querySelector ().
Приклад реалізації querySelector ().
Нижче наведено приклад коду, який допоможе нам зрозуміти роботу методу querySelector ():
class='colors'>Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll ('p'); console.log(e);
Тепер ви можете побачити різницю між кодом, який у першому прикладі ми використовували метод querySelector (), і він виводив лише перше відповідне значення селектора. Але, спостерігаючи за результатами цього другого прикладу, ви побачите, що він повернув усі відповідні значення вказаних селекторів або групи селекторів. Вихід наведеного вище коду показано нижче:
Пояснення коду
- Наведений вище код є комбінацією html і JavaScript.
- Ми реалізували різні селектори CSS у коді.
- У розділі JavaScript ми використали метод querySelectorAll () і викликали селектор елементів CSS.
- Таким чином, метод querySelectorAll () тепер переміщується до коду для його обходу за допомогою методу попереднього замовлення Depth-first і повертає всі відповідні значення елементів, які вказані як параметри методу querySlectorAll ().
Отже, таким же чином ми можемо використовувати метод querySelectorAll () також для інших типів селекторів CSS, і він поверне всі відповідні значення селекторів, які вказані як його аргумент. Щоб реалізувати метод, замініть метод querySelector () на метод querySelectorAll () для різних селекторів, і метод знайде збіг і поверне принаймні одне відповідне значення зазначеного елемента.