QuerySelector е JavaScript метод, който играе жизненоважна роля при търсенето на елементи.
В този раздел ще разберем и обсъдим метода querySelector (), неговата употреба и ще разгледаме пример, за да разберем на практика концепцията на метода querySelector ().
Представяне на метода JavaScript querySelector ().
Метод на елементен интерфейс, който ни позволява да търсим и връщаме първия елемент в документа. Той намира този елемент, който съвпада с някой от посочените CSS селектори или група селектори. Ако обаче не бъде намерен съответстващ елемент, той връща нула. Методът querySelector () е методът само на интерфейса на документа. Интерфейсът на документа е интерфейс, който описва общите методи, както и свойствата за всеки html, XML или друг вид документ.
Как методът querySelector () извършва търсенето
Знаем, че има различни видове търсения, които могат да се използват за търсене на елементи. Методът querySelector () обаче използва предварителна поръчка на първа дълбочина обхождане на възлите на документа. В него преминаването започва с първия елемент в маркирането на документа и след това преминава през последователните възли по реда на броя дъщерни възли.
индустрия и фабрика
Синтаксис
element = document.querySelector(selectors);
Методът querySelector () е метод на интерфейс на документа и затова има такъв синтаксис.
Той има един параметър, 'селектори', който е DOM низ и има един или повече валидни CSS селектори.
Тип връщане
Може да върне 'null', ако не бъде намерено съвпадение, и ако първият елемент съвпада с посочените CSS селектори (ако има такива), ще върне този елемент.
машинопис дата час
Ако обаче няма валиден 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 () за различни селектори и методът ще намери съвпадението и ще върне поне една съответстваща стойност на посочения елемент.