QuerySelector je metóda JavaScript, ktorá hrá dôležitú úlohu pri vyhľadávaní prvkov.
V tejto časti porozumieme a rozoberieme metódu querySelector () a jej použitie a tiež sa pozrieme na príklad, aby sme prakticky pochopili koncept metódy querySelector ().
Predstavujeme metódu JavaScript querySelector ().
Metóda rozhrania prvku, ktorá nám umožňuje vyhľadať a vrátiť prvý prvok v dokumente. Nájde prvok, ktorý sa zhoduje s ktorýmkoľvek zo zadaných selektorov CSS alebo skupiny selektorov. Ak sa však nenájde žiadny zodpovedajúci prvok, vráti hodnotu null. Metóda querySelector () je metóda len rozhrania dokumentu. Rozhranie dokumentu je rozhranie, ktoré popisuje bežné metódy, ako aj vlastnosti akéhokoľvek html, XML alebo akéhokoľvek iného druhu dokumentu.
Ako metóda querySelector () vykonáva vyhľadávanie
Vieme, že existujú rôzne typy vyhľadávania, ktoré možno použiť na vyhľadávanie prvkov. Používa sa však metóda querySelector (). hĺbka-prvá predobjednávka prechod cez uzly dokumentu. V ňom sa prechod začína prvým prvkom v označení dokumentu a potom prechádza cez sekvenčné uzly v poradí podľa počtu podriadených uzlov.
plsql
Syntax
element = document.querySelector(selectors);
Metóda querySelector () je metóda rozhrania dokumentu, a preto má takúto syntax.
Má jeden parameter, selektory, čo je reťazec DOM a má jeden alebo viac platných selektorov CSS.
Typ návratu
Ak sa nenájde žiadna zhoda, môže vrátiť hodnotu „null“ a ak sa prvý prvok zhoduje so špecifikovanými selektormi CSS (ak existujú), vráti tento prvok.
Ak však neexistuje žiadny platný selektor CSS, vyvolá výnimku „SyntaxError“.
Teraz, predtým ako sa pozrieme na príklad implementácie, by sme mali vedieť o rôznych typoch selektorov CSS. Ak si nie ste vedomí, navštívte naše https://www.javatpoint.com/css-selector sekcii CSS tutoriálu.
Takže teraz implementujeme príklad, v ktorom pokryjeme selektor CSS a zachováme jeho hodnotu prvého prvku pomocou metódy querySelector ().
Implementácia querySelector () Príklad
Nižšie je uvedený príklad kódu, ktorý nám umožní pochopiť fungovanie metódy querySelector ():
ako previesť str na int
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);
Teraz môžete vidieť rozdiel medzi kódom, ktorý sme v prvom príklade použili metódu querySelector () a na výstupe sa zobrazila iba prvá zodpovedajúca hodnota selektora. Keď si však pozriete výstup tohto druhého príkladu, uvidíte, že vrátil všetky zodpovedajúce hodnoty zadaných selektorov alebo skupiny selektorov. Výstup vyššie uvedeného kódu je uvedený nižšie:
Vysvetlenie kódu
- Vyššie uvedený kód je kombináciou html a JavaScriptu.
- Do kódu sme implementovali rôzne selektory CSS.
- V sekcii JavaScript sme použili metódu querySelectorAll () a vyvolali selektor prvkov CSS.
- Metóda querySelectorAll () sa teda teraz presunie do kódu na jej prechádzanie pomocou metódy predbežnej objednávky Depth-first a vráti všetky zodpovedajúce hodnoty prvkov, ktoré sú zadané ako parametre metódy querySlectorAll ().
Takže rovnakým spôsobom môžeme použiť metódu querySelectorAll () aj pre rôzne iné typy selektorov CSS a vráti všetky zodpovedajúce hodnoty selektorov, ktoré sú zadané ako jej argument. Na implementáciu metódy nahraďte metódu querySelector () metódou querySelectorAll () pre rôzne selektory a metóda nájde zhodu a vráti aspoň jednu zodpovedajúcu hodnotu zadaného prvku.