КуериСелецтор је ЈаваСцрипт метод који игра виталну улогу у претраживању елемената.
У овом одељку ћемо разумети и разговарати о методу куериСелецтор (), његовој употреби и такође ћемо погледати пример да бисмо практично разумели концепт методе куериСелецтор ().
Представљамо ЈаваСцрипт методу куериСелецтор ().
Метода интерфејса елемента која нам омогућава да претражимо и вратимо први елемент унутар документа. Проналази онај елемент који се подудара са било којим од наведених ЦСС селектора или групе селектора. Међутим, ако се не пронађе одговарајући елемент, враћа нулл. Метод куериСелецтор () је само метод интерфејса документа. Интерфејс документа је интерфејс који описује уобичајене методе као и својства за било који хтмл, КСМЛ или било коју другу врсту документа.
Како метода куериСелецтор () обавља претрагу
Знамо да постоје различите врсте претрага које се могу користити за претраживање елемената. Међутим, метода куериСелецтор () користи дубински пре-ордер обилажење чворова документа. У њему, прелазак почиње са првим елементом у маркупу документа, а затим прелази кроз секвенцијалне чворове по редоследу броја подређених чворова.
општа грешка заштите
Синтакса
element = document.querySelector(selectors);
Метода куериСелецтор () је метод интерфејса документа и зато има такву синтаксу.
Има један параметар, 'селецторс', који је ДОМ стринг и има један или више важећих ЦСС селектора.
Ретурн Типе
Може да врати 'нулл' ако није пронађено подударање, а ако се први елемент поклапа са наведеним ЦСС селекторима (ако их има), вратиће тај елемент.
Међутим, ако не постоји важећи ЦСС селектор, он ће бацити изузетак „СинтакЕррор“.
Сада, пре него што погледамо пример имплементације, требало би да знамо о различитим типовима ЦСС селектора. Ако нисте свесни, посетите нашу хттпс://ввв.јаватпоинт.цом/цсс-селецтор одељак ЦСС туторијала.
Дакле, сада ћемо имплементирати пример под којим ћемо покрити ЦСС селектор и задржати његову вредност првог елемента коришћењем методе куериСелецтор ().
Пример имплементације куериСелецтор ().
Испод је пример кода који ће нам помоћи да разумемо рад методе куериСелецтор ():
формат стринга у Јави
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);
Сада можете видети разлику између кода који смо у првом примеру користили методу куериСелецтор () и он је избацио само прву одговарајућу вредност селектора. Али, када посматрате излаз овог другог примера, видећете да је вратио све одговарајуће вредности наведених селектора или групе селектора. Излаз горњег кода је приказан у наставку:
Објашњење кода
- Горњи код је комбинација хтмл-а и ЈаваСцрипт-а.
- Имплементирали смо различите ЦСС селекторе у коду.
- У одељку ЈаваСцрипт, користили смо метод куериСелецторАлл () и позвали селектор елемената ЦСС-а.
- Дакле, метода куериСелецторАлл () сада прелази у код за његово прелажење користећи методу претходног наручивања у дубину и враћа све одговарајуће вредности елемента које су наведене као параметри методе куериСлецторАлл ().
Дакле, на исти начин, можемо користити метод куериСелецторАлл () и за разне друге типове ЦСС селектора, и он ће вратити све одговарајуће вредности селектора које су наведене као његов аргумент. Да бисте применили метод, замените метод куериСелецтор () методом куериСелецторАлл () за различите селекторе, а метод ће пронаћи подударање и вратиће најмање једну одговарајућу вредност наведеног елемента.