Kratki vodič o tome kako selektori utječu na vaš kôd
Tijekom rada na projektu, naišao sam na problem u svom kodu. Pokušavao sam definirati više HTML elemenata u zbirku, a zatim ih promijeniti na temelju nekih unaprijed postavljenih uvjeta. Borio sam se otprilike četiri sata vremena kodiranja (kroz dva dana) otklanjajući pogreške u svom kodu i pokušavajući shvatiti zašto nisam postigao željeni ishod.
Ispalo je da sam upotrijebio document.querySelectorAll () da dodijelim svoje elemente varijabli, a zatim sam pokušavao promijeniti te elemente. Jedini je problem što određeni JavaScript selektor vraća popis statičkih čvorova . Budući da se ne radi o živom predstavljanju elemenata, kasnije ih nisam mogao promijeniti u svom kodu.
Pretpostavke
U ovom članku pretpostavljam da je nekoliko stvari točno:
- Radite u "običnom ili vanilinom" JavaScript-u (bez okvira / biblioteke)
- Imate osnovno razumijevanje JavaScript elemenata / selektora
- Imate osnovno razumijevanje DOM-a
Glatko-škrtavi
U slučaju da pretpostavim previše, dao sam poveznice na relevantni materijal u članku za koji se nadam da će biti koristan.
JavaScript je tako golem i bogat ekosustav da ne čudi da postoji mnogo načina za izvršavanje istog zadatka. Ovisno o vašem zadatku, način na koji je izvršen važan je do određene mjere.
Rupu možete iskopati rukama, ali to je puno lakše i učinkovitije raditi lopatom.
U tu svrhu nadam se da ću vam nakon što pročitate ovaj članak "predati lopatu".
Odabir pravog alata za posao
Imao sam pitanje: "Koji birač elemenata trebam koristiti?" nekoliko puta. Do sada nisam imao puno želje niti potrebe naučio razliku sve dok je moj kôd davao željeni rezultat. Napokon, kakva je važnost boje taksija sve dok vas sigurno i pravodobno vodi do odredišta ... zar ne?
Počnimo s nekim od načina odabira DOM elemenata u JavaScript-u. Postoji više načina (vjerujem) za odabir elemenata, ali oni ovdje navedeni daleko su najzastupljeniji na koje sam naišao.
document.getElementById ()
Oni će vratiti samo jedan (1) element, jer su po svojoj prirodi ID-ovi jedinstveni i na stranici istovremeno može biti samo jedan (s istim imenom).
Vraća objekt koji odgovara nizu koji je u njega proslijeđen. Vraća nulu ako u vašem HTML-u nije pronađen odgovarajući ID.
Primjer sintakse - & g t; document.getElementById ('main_conten t')Za razliku od nekih selektora do kojih ćemo doći kasnije u članku, za označavanje elementa nije potreban znak #.
document.getElementsByTagName ()
Primijetite "S" u elementima - ovaj birač vraća višestruke vrijednostiu strukturi nalik na nizpoznata kao HTML kolekcija - pretražuje se sav dokument, uključujući korijenski čvor (objekt dokumenta), za pronalazak odgovarajućeg imena. Ovaj birač elemenata započinje s vrha dokumenta i nastavlja prema dolje, tražeći oznake koje odgovaraju prosljeđenom nizu.
Ako želite koristiti metode matičnog niza, nemate sreće. Odnosno, ako vraćene rezultate ne pretvorite u niz da biste ih prevrtali ili upotrijebite ES6 operator širenja - što je oboje izvan dosega ovog članka. Ali želio sam da znate da je moguće koristiti metode niza ako želite.
Primjer sintakse - & g t; document.getElementsByTagName ('header_li nks '). Ovaj selektor također prihvaća ts p, div, body ili bilo koji drugi valjani HTML t ag.document.getElementsByClassName ()
Birač naziva klase - opet primijetite "S" u elementima - ovaj selektor vraća višestruke vrijednostiu strukturi nalik na nizpoznata kao HTML kolekcija naziva klasa. Podudara se s prosljeđenim nizom (može uzeti više naziva klase, iako su odvojeni razmakom), pretražuje cijeli dokument, može se pozvati na bilo kojem elementu i vraća samo potomke proslijeđenog u klasi.
Također, br. (točka) je potrebna za označavanje naziva klase
Primjer sintakse: document.getElementsByClassName ('classNam e')document.querySelector ()
Ovaj će selektor vratiti samo jedan (1) element.
Vratit će se samo prvi element koji odgovara prosljeđenom nizu. Ako nisu pronađena podudaranja za navedeni niz, nullse vraća.
Primjer sintakse: document.querySelector ('# side_note ') ili document.querySelector ('. Header_link s')Za razliku od svih naših prethodnih primjera, ovaj selektor zahtijeva a. (točka) za označavanje klase ili # (octothorp) za označavanje ID-a i radi sa svim CSS selektorima.
document.querySelectorAll ()
Ovaj selektor vraća višekratnike koji se podudaraju s prosljeđenim nizom i raspoređuje ih u drugi niz poput strukture poznate kao popis čvorova.
Kao i kod nekih od prethodnih primjera, popis čvorova ne može koristiti matične metode niza poput .forEach (). Dakle, ako ih želite koristiti, prvo morate pretvoriti popis čvorova u niz. Ako ne želite pretvoriti, još uvijek možete prelistati popis čvorova s izjavom for….
Proslijeđeni niz mora odgovarati važećem CSS selektoru - id, nazivima klasa, vrstama, atributima, vrijednostima atributa itd.
Primjer sintakse: document.querySelectorAll ('. Footer_link s')Završavati
Odabirom pravog selektora za vaše potrebe kodiranja, izbjeći ćete mnoge zamke u koje sam upao. To može biti nevjerojatno frustrirajuće kada vaš kôd ne radi, ali osiguravajući da vaš selektor odgovara vašim situacijskim potrebama, nećete imati problema s "kopanjem lopatom" :)
Hvala vam što ste pročitali ovaj post. Ako ste uživali, razmislite o doniranju nekih pljeska kako biste i drugima pomogli da ga pronađu. Na svom blogu objavljujem (aktivno upravljam svojim rasporedom da bih napisao više). Također sam aktivan na Twitteru i uvijek se rado povežem s drugim programerima!