A querySelector egy JavaScript metódus, amely létfontosságú szerepet játszik az elemek keresésében.
Ebben a részben megértjük és megvitatjuk a querySelector () metódust, annak használatát, valamint áttekintünk egy példát a querySelector () metódus gyakorlati megértéséhez.
A JavaScript querySelector () metódus bemutatása
Egy elem interfész metódus, amely lehetővé teszi számunkra, hogy megkeressük és visszaadjuk a dokumentum első elemét. Megkeresi azt az elemet, amely megfelel a megadott CSS-szelektorok vagy választócsoportok bármelyikének. Ha azonban nem található egyező elem, akkor nullát ad vissza. A querySelector () metódus csak a Dokumentum felület metódusa. A dokumentum interfész egy olyan interfész, amely leírja az általános metódusokat, valamint bármely html , XML vagy bármely más típusú dokumentum tulajdonságait.
Hogyan hajtja végre a keresést a querySelector () metódus
Tudjuk, hogy különböző típusú keresések használhatók elemek keresésére. A querySelector () metódus azonban használja mélység-első előrendelés a dokumentum csomópontjainak bejárása. Ebben a bejárás a dokumentum jelölésének első elemével kezdődik, majd az utódcsomópontok számának sorrendjében halad át a szekvenciális csomópontokon.
adatbányászat
Szintaxis
element = document.querySelector(selectors);
A querySelector () metódus egy dokumentum interfész metódusa, ezért van ilyen szintaxisa.
Egy paramétere van, a 'selectors', amely egy DOM-karakterlánc, és egy vagy több érvényes CSS-szelektorral rendelkezik.
Visszatérés típusa
A „null” értéket adhatja vissza, ha nem található egyezés, és ha az első elem egyezik a megadott CSS-szelektorokkal (ha vannak), akkor azt az elemet adja vissza.
Ha azonban nincs érvényes CSS-választó, akkor „SyntaxError” kivételt dob.
Most, mielőtt egy példa megvalósítást néznénk, ismernünk kell a CSS-szelektorok különféle típusait. Ha nem ismeri, látogasson el hozzánk https://www.javatpoint.com/css-selector a CSS oktatóanyag része.
Tehát most egy olyan példát fogunk megvalósítani, amelyben a querySelector () metódussal lefedünk egy CSS-választót, és megtartjuk annak első elemértékét.
A querySelector () megvalósítása Példa
Az alábbiakban egy példakód látható, amely megértetheti a querySelector () metódus működését:
java parse string to 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);
Most már láthatja a különbséget a kód között, hogy az első példában a querySelector () metódust használtuk, és csak az első egyező választóértéket adta ki. De ha megfigyeli ennek a második példának a kimenetét, látni fogja, hogy a megadott szelektorok vagy választócsoportok összes egyező értékét visszaadta. A fenti kód kimenete az alábbiakban látható:
Kód magyarázata
- A fenti kód a html és a JavaScript kombinációja.
- Különféle CSS-szelektorokat implementáltunk a kódban.
- A JavaScript részben egy querySelectorAll () metódust használtunk, és meghívtunk egy CSS elemválasztót.
- Tehát a querySelectorAll () metódus most a Depth-first preorder metódussal bejárandó kódra lép, és visszaadja a querySlectorAll () metódusparaméterként megadott összes egyező elemértéket.
Tehát ugyanígy használhatjuk a querySelectorAll () metódust a különféle más típusú CSS-szelektorokhoz is, és visszaadja az argumentumként megadott szelektorok összes egyező értékét. A metódus megvalósításához cserélje ki a querySelector () metódust a querySelectorAll () metódusra a különböző kijelölőknél, és a metódus megtalálja az egyezést, és visszaadja a megadott elem legalább egy egyező értékét.