QuerySelector je metoda JavaScriptu, která hraje zásadní roli při vyhledávání prvků.
V této části porozumíme a probereme metodu querySelector () a její použití a také se podíváme na příklad, abychom prakticky pochopili koncept metody querySelector ().
Představujeme metodu JavaScript querySelector ().
Metoda rozhraní prvku, která nám umožňuje vyhledat a vrátit první prvek v dokumentu. Najde prvek, který se shoduje s kterýmkoli zadaným selektorem CSS nebo skupinou selektorů. Pokud však není nalezen žádný odpovídající prvek, vrátí hodnotu null. Metoda querySelector () je metodou pouze rozhraní dokumentu. Rozhraní dokumentu je rozhraní, které popisuje běžné metody a také vlastnosti libovolného html , XML nebo jakéhokoli jiného druhu dokumentu.
Jak metoda querySelector () provádí vyhledávání
Víme, že existují různé typy vyhledávání, které lze použít pro vyhledávání prvků. Metoda querySelector () však používá deep-first předobjednávka průchod uzlů dokumentu. V něm začíná procházení prvním prvkem v označení dokumentu a poté prochází přes sekvenční uzly v pořadí podle počtu podřízených uzlů.
es5 vs es6
Syntax
element = document.querySelector(selectors);
Metoda querySelector () je metoda rozhraní dokumentu a má tedy takovou syntaxi.
Má jeden parametr, 'selektory', což je řetězec DOM a má jeden nebo více platných selektorů CSS.
Typ návratu
Pokud není nalezena žádná shoda, může vrátit hodnotu „null“ a pokud první prvek odpovídá zadaným selektorům CSS (pokud existují), vrátí tento prvek.
Pokud však neexistuje žádný platný selektor CSS, vyvolá výjimku 'SyntaxError'.
Nyní, než se podíváme na příklad implementace, bychom měli vědět o různých typech selektorů CSS. Pokud si nejste vědomi, navštivte naše https://www.javatpoint.com/css-selector sekce CSS tutoriálu.
Nyní tedy implementujeme příklad, ve kterém pokryjeme selektor CSS a zachováme jeho hodnotu prvního prvku pomocí metody querySelector ().
Implementace querySelector () Příklad
Níže je uveden příklad kódu, který nám umožní pochopit fungování metody 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);
Nyní můžete vidět rozdíl mezi kódem, který jsme v prvním příkladu použili metodu querySelector () a vypsala pouze první odpovídající hodnotu selektoru. Ale když budete pozorovat výstup tohoto druhého příkladu, uvidíte, že vrátil všechny odpovídající hodnoty zadaných selektorů nebo skupiny selektorů. Výstup výše uvedeného kódu je uveden níže:
Vysvětlení kódu
char tostring java
- Výše uvedený kód je kombinací html a JavaScriptu.
- Do kódu jsme implementovali různé selektory CSS.
- V sekci JavaScript jsme použili metodu querySelectorAll () a vyvolali selektor prvků CSS.
- Metoda querySelectorAll () se tedy nyní přesune do kódu pro její procházení pomocí metody Depth-first pre-order a vrátí všechny odpovídající hodnoty prvků, které jsou zadané jako parametry metody querySlectorAll ().
Stejným způsobem tedy můžeme použít metodu querySelectorAll () také pro různé další typy selektorů CSS a vrátí všechny odpovídající hodnoty selektorů, které jsou uvedeny jako její argument. Aby bylo možné metodu implementovat, nahraďte pro různé selektory metodu querySelector () metodou querySelectorAll () a metoda najde shodu a vrátí alespoň jednu odpovídající hodnotu zadaného prvku.