JavaScript metoda document.querySelector() vraća prvi element u dokumentu (objekt Element) koji odgovara navedenom selektoru ili grupi selektora. Ako se ne pronađu podudaranja, vraća se null.
Imajte na umu da nije dopušteno koristiti CSS pseudoelemente kao vrijednost selektora za traženje elemenata; u ovom slučaju, vraćena vrijednost će uvijek biti null.
Ako trebate popis svih elemenata koji odgovaraju određenom selektoru ili selektorima, upotrijebite metodu querySelectorAll() da to učinite.
Metoda .querySelector() također je definirana na objektu Element, zbog toga se može pozvati na bilo kojem elementu, ne samo na objektu dokumenta. Element na kojem se poziva koristit će se kao korijenski element za pretraživanje.
Preglednik podržava JavaScript sintaksu: dokument .querySelector( selektori) selektori- Vrijednosti parametara API razine 1 odabira niza specifikacija| selektori | Argument mora odgovarati valjanom nizu selektora koji sadrži jedan ili više selektora. Kada navodite više selektora, morate razdvojiti vrijednosti zarezima. U ovom slučaju bit će odabran prvi pronađeni element iz zadanih selektora. Ako iz nekog razloga koristite znakove u nazivima selektora koji nisu dio standardne sintakse CSS, tada se kod pretraživanja takvi znakovi moraju izbjeći pomoću znaka obrnute kose crte ( "\" ). Budući da je obrnuta kosa crta također poseban znak ( pobjeći) V JavaScript, tada se kod unosa literalnog niza mora dvaput izbjeći. Potreban parametar. |
U ovom primjeru, korištenjem atributa događaja onclick, kada se klikne gumb (HTML element), pozivamo funkciju myFunc() koja, koristeći JavaScript Metoda dokumenta .querySelector() odabire sljedeće elemente:
- Prvi element s klasom bloka u dokumentu i skupu crno boja pozadine pronađenog elementa.
- Prvi element iz zadanih selektora (element s class first , element s class block ) i postavite boju teksta pronađenog elementa na crvenu. U ovom slučaju bit će odabrano prvi pronađeni element iz zadanih selektora.
- Element koji je drugi podređeni element njegovog nadređenog elementa i postavljen na pronađeni element zelena boja teksta.
- Element koji je posljednji od elemenata svog roditeljskog elementa i postavljen je na pronađeni element plava boja teksta.
Rezultat našeg primjera.
Kao što znate, kada se razvija velika JS aplikacija koja koristi popularnu biblioteku jQuery, dođe vrijeme kada problem performansi postane akutan. Svi napori se bacaju na profilerovo zahvat, svaki izazov se pomno ispituje, svaki funkcionalno opterećeni komad implementacije se njuška sa svih strana i ispravlja. Ali problemi ne dolaze iz smjera u kojem ih očekuje 90% programera. Selektori - Toliko je toga u ovoj riječi.
Shvatimo kako ova magija funkcionira i zašto pretraživanje DOM elemenata može uzrokovati pad performansi aplikacije.
Dat ću vam jednostavan primjer:
Dva prikazana birača praktički se ne razlikuju i vratit će isti skup elemenata. Međutim, prvi selektor će vratiti rezultat querySelectorAll(), a drugi će vratiti rezultat normalnog filtriranja po elementima.
$("#my_form input")
$("#my_form input") Raščlanjivanje i traženje selektora Ako querySelectorAll() ne uspije, Sizzle će pokušati koristiti normalne funkcije preglednika getElementById(), getElementsByName(), getElementsByTagName() i getElementByClass(). U većini slučajeva oni su dovoljni, ali (sic!) u IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
Općenito, Sizzle analizira birač s desna na lijevo. Za ilustraciju ove značajke, evo nekoliko primjera:
$(".divs.my_class")
Prvo će pronaći .my_class elemente, a zatim filtrirati samo one koji imaju .div u svojim roditeljima. Kao što vidimo, ovo je prilično skupa operacija, a korištenje konteksta ne rješava problem (o kontekstu ćemo govoriti u nastavku).
Kao što sam rekao - u većini slučajeva Sizzle će analizirati selektor s desna na lijevo, ali ne kada koristi element s ID-om:
$("#divs .my_class")
U ovom slučaju, selektor će se ponašati kao što se očekuje i #div element će se odmah koristiti kao kontekst. Drugi parametar proslijeđen zajedno sa selektorom funkciji $() zove se kontekst. Osmišljen je da suzi pretragu elemenata. Međutim, tijekom parsiranja, kontekst je usidren na početku selektora, što ne daje nikakvu korist. Dobitna kombinacija korištenja konteksta valjani je selektor za querySelectorAll(), budući da se ova funkcija može koristiti ne samo u ime dokumenta, već i za element. Zatim se selektor s kontekstom figurativno transformira u sljedeću konstrukciju:
$(".divs", document.getElementById("omot"));
document.getElementById("omot").querySelectorAll(".divs"); // ako je moguće, upotrijebite querySelectorAll()
U ovom primjeru, ako nije moguće koristiti querySelectorAll(), Sizzle će filtrirati elemente pomoću jednostavne iteracije.
Još jedna napomena o kontekstu (ne govorimo o selektorima) - ako proslijedite jQuery objekt kao drugi parametar selektoru za funkciju.live(), događaj će biti uhvaćen na dokumentu(!), a ako to je DOM objekt, tada će se događaj pojavljivati samo do ovog elementa. Pokušavam ne zapamtiti takve suptilnosti, ali koristim .delegate() .
$(".root > .child")
Kao što znamo, raščlanjivanje selektora i pretraživanje započet će s elementima all.child na stranici (pod uvjetom da querySelectorAll() nije dostupan). Ova operacija je prilično skupa i selektor možemo transformirati ovako:
$(".dijete", $(".korijen")); // korištenje konteksta neće olakšati pretraživanje
$(".root").find(".child"); // zašto moramo iterirati kroz sve elemente unutar .root?
$(".root").djeca(".dijete"); // najispravnija opcija
Međutim, ako postoji potreba za korištenjem filtara po bilo kojem atributu (:visible, :eq, itd.) i selektor izgleda ovako:
$(".some_images:visible")
tada će se filtar primijeniti zadnji - tj. Opet odstupamo od pravila “zdesna na lijevo”.
- Ako je moguće, koristite ispravne birače koji odgovaraju querySelectorAll()
- Zamijenite podređenost unutar selektora podupitima (.children(...) itd.)
- Pojasnite kontekst selektora
- Filtrirajte što manji gotov skup elemenata
Na temelju majstorske klase
JavaScript, poput CSS-a, ima funkcionalnost koja vam omogućuje pristup HTML elementima za transformaciju sadržaja stranice. U CSS-u se to postiže pisanjem selektora. Postoji nekoliko načina organiziranja ove funkcije u JavaScriptu, a evo jednog od njih:
Var primaryHeadings = document.getElementsByTagName("h1");
Ovaj kod izvlači sva h1 zaglavlja i, grubo govoreći, smješta ih u varijablu primaryHeadings. Ako na stranici postoji nekoliko naslova, svi će biti postavljeni u niz.
Var ou812 = document.getElementById("eddie");
Ovaj kod odabire element s id = “eddie”.
Var gitare = document.getElementsByClassName("osovine");
Također možemo odabrati elemente prema nazivu njihovih klasa.
Dodajmo malo SizzleaRazni JavaScript okviri pružaju vlastite opcije za stvaranje selektora. Jedan od najuspješnijih bio je Sizzle, koji je kasnije postao jQuery. Za razliku od svog potomka, Sizzle je mogao raditi samo s DOM-om i manipulirati njime. Ako vam nisu potrebne sve ostale funkcije jQueryja, još danas možete preuzeti Sizzle kao zasebnu biblioteku.
S razvojem ovih biblioteka, pisanje selektora značajno je smanjeno i transformirano:
$("#dave").css()
Ovaj kod izvlači html element s id=”dave” i omogućuje vam rad s njegovim css stilovima.
Sizzle nije jedina JavaScript biblioteka za manipuliranje HTML kodom. Postoje i druge opcije, na primjer rangy. No, po mom mišljenju, sve navedeno je zastarjelo prije onoga što vas čeka dalje u ovom članku.
Sljedeća razina JavaScriptaMnogi programeri počeli su koristiti jQuery toliko često da nisu ni primijetili dramatične promjene u samom JavaScriptu.
“JavaScript Selector API” službeni je dio HTML5 specifikacije i može se koristiti i pri pisanju XHTML stranica. Nova sintaksa je vrlo jednostavna:
Document.querySelector("#eddie")
Ovaj kod je apsolutno ekvivalentan dokumentu.getElementById("eddie"). Nije impresivno? Što s ovim:
Document.querySelector("#eddie h1 + p")
Nova funkcionalnost omogućuje vam manipuliranje DOM-om pomoću složenih CSS izraza.
Metoda querySelector dohvaća samo prvi element na koji naiđe. Da biste dohvatili sve, morate koristiti querySelectorAll:
Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")
Ovaj kod dohvaća svaki treći red iz tablice s id="frets".
Nekoliko vrlo važnih točakaPostoji nekoliko ograničenja kojih biste trebali biti svjesni ako koristite metodu querySelector / All:
Ne podržavaju svi preglednici novu funkciju. Ako vam je važno da kod radi na IE6-7, onda je bolje koristiti biblioteke koje mogu manipulirati DOM-om: Sizzle ili jQuery.
Selektori moraju biti napisani vrlo pažljivo, inače ih preglednici neće razumjeti, a gore navedene metode vratit će null. Općenito, budite vrlo oprezni, posebno kada koristite CSS3 selektore.
Za razliku od getElementsByTagName, metoda querySelectorAll vraća statički popis dohvaćenih elemenata onako kako se trenutno pojavljuju na stranici. To znači da ćete prilikom bilo kakvih dinamičkih promjena u kodu (dodavanje, uklanjanje elemenata putem JavaScripta) morati ponovno koristiti metodu querySelectorAll.
Isprobajte novu funkcionalnost kako biste se riješili potrebe za preuzimanjem raznih vrsta biblioteka.
Zadatak s kojim se vrlo često susreću početnici JavaScript programeri je odabir elementa na web stranici prema njegovom id atributu.
Recimo da imamo kod na stranici.
Blokiraj sadržaj.
Kako možete odabrati element s id="elem" i izvesti niz akcija s njim?
Postoji nekoliko opcija za rješavanje problema. Pogledajmo ih sada.
Opcija 1: Koristite metodu Javascript getElementById.
Postoji način pristupa elementu pomoću njegovog ID-a pomoću "čistog" javascript koda, bez korištenja biblioteka treće strane. Ova metoda koristi metodu ggetElementById(“element_id”). Dakle, elementu koji nam treba pristupamo preko njegovog ID-a.
Pogledajmo kako to funkcionira na jednostavnom primjeru.
Blokiraj sadržaj. upozorenje(document.getElementById("elem").innerHTML);
Imajte na umu da se ove linije koda (skripte) nalaze ispod samog elementa. Ovo je preduvjet za rad ove skripte, jer... Javascript kôd se izvršava dok se stranica učitava. Ako postavimo gornji kod, pristupit ćemo elementu na stranici koji se još nije učitao, tj. još neće biti u kodu u vrijeme kada se skripta izvršava. Postoje načini da se to izbjegne, ali to je izvan dosega ovog članka.
Kao rezultat toga, ako sve radi ispravno, dobit ćemo skočni prozor. Ovaj prozor će prikazati tekst koji se nalazi unutar div bloka.
Pogledajmo sada kako ovaj problem možemo riješiti na drugi način.
Opcija 2. Korištenje biblioteke Jquery.
Druga opcija za odabir elementa prema ID-u je korištenje biblioteke Jquery. U praksi, u suvremenim skriptama, ovaj se način najčešće koristi. Mnogo je praktičniji i lakši za pamćenje.
Kako biste se pozvali na element prema njegovom ID-u, morate koristiti sljedeću konstrukciju:
$("#elem")
Ovdje je elem ime sadržano u atributu id.
Jer Koristit ćemo Javascript biblioteku treće strane koja se zove Jquery, a onda se ta biblioteka prvo mora uključiti.
Dodaje se u odjeljak, jedan od načina na koji se to može učiniti je dodavanje sljedećeg retka koda:
Da bi se biblioteka mogla učitati mora postojati internetska veza.
Blokiraj sadržaj. upozorenje($("#elem").html());
Sama skripta, kao u prethodnom primjeru, trebala bi se nalaziti ispod koda elementa s kojim želite komunicirati.
Stoga smo raspravljali o dva načina kako možete odabrati element na web stranici prema njegovom id atributu i komunicirati s njim. Odaberite metodu koja vam odgovara i primijenite je u praksi.
Unutar dokumenta koji odgovara navedenom selektoru ili grupi selektora. Ako se ne pronađu podudaranja, vraća se null.
Napomena: usklađivanje se vrši korištenjem obilaska čvorova dokumenta u dubinu prije narudžbe, počevši od prvog elementa u označavanju dokumenta i ponavljajući kroz sekvencijske čvorove prema redoslijedu broja podređenih čvorova.
Element sintakse = document.querySelector(selektori); Selektori parametara DOMString koji sadrži jedan ili više selektora za podudaranje. Ovaj niz mora biti važeći niz CSS selektora; ako nije, izbacuje se iznimka SYNTAX_ERR. Pogledajte Lociranje DOM elemenata pomoću selektora za više o selektorima i kako njima upravljati.Napomena: Znakovi koji nisu dio standardne CSS sintakse moraju se izbjeći pomoću znaka obrnute kose crte. Budući da JavaScript također koristi izbjegavanje obrnute kose crte, budite posebno oprezni kada pišete literale niza pomoću ovih znakova. Pogledajte za više informacija.
Povratna vrijednost Iznimke SYNTAX_ERR Sintaksa navedenih selektora nije važeća. Bilješke o korištenjuAko se navedeni selektor podudara s ID-om koji je netočno upotrijebljen više puta u dokumentu, vraća se prvi element s tim ID-om.
Izbjegavanje posebnih znakovaZa podudaranje s ID-om ili selektorima koji ne slijede standardnu CSS sintaksu (na primjer, neprikladnom upotrebom dvotočke ili razmaka), morate izbjeći znak obrnutom kosom crtom (" \ "). Kako je obrnuta kosa crta također izlazni znak u JavaScriptu, ako unosite literalni niz, morate ga izbjeći dvaput(jednom za JavaScript niz, a drugi put za querySelector()):
console.log("#foo\bar"); // "#fooar" (\b je kontrolni znak povratnice) document.querySelector("#foo\bar"); // Ne odgovara ničemu console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Podudaranje s prvim divom document.querySelector("#foo:bar"); // Ne odgovara ničemu document.querySelector("#foo\\:bar"); // Podudaranje drugog div
Primjeri Pronalaženje prvog elementa koji odgovara klasiU ovom primjeru vraća se prvi element u dokumentu s klasom " myclass ":
Var el = document.querySelector(".myclass");
Kompleksniji selektorSelektori također mogu biti jako moćni, kao što je pokazano u sljedećem primjeru. Ovdje se vraća prvi element s imenom "login" () koji se nalazi unutar čija je klasa "user-panel main" () u dokumentu:
Var el = document.querySelector("div.user-panel.main input");
Tehnički podaci| DOM Definicija "document.querySelector()" u toj specifikaciji. |
Životni standard |
Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.
Ažurirajte podatke o kompatibilnosti na GitHubu
| Desktop Mobile | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome za Android Firefox za Android Opera za Android Safari na iOS-u Samsung Internet | |||||||||||
| Puna podrška za Chrome 1 | Edge Potpuna podrška 12 | Firefox Puna podrška 3.5 | IE puna podrška 8 | Opera puna podrška 10 | Safari Potpuna podrška 3.2 | WebView Android Puna podrška Da | Chrome Android Puna podrška Da | Firefox Android Puna podrška Da | Opera Android Puna podrška 10.1 | Safari iOS Puna podrška 3.2 | Samsung Internet Android ? |
