Kako izbjeći frustraciju odabirom pravog odabirača JavaScripta

Brzi 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 zbirci i zatim ih promijenio na temelju nekih unaprijed uvjeta. Borila sam se otprilike četiri sata vremena kodiranja (tijekom dva dana) uklanjajući ispravljanje koda i pokušavala shvatiti zašto nisam postigla željeni ishod.

Ispada da sam dokument.querySelectorAll () dodijelio elementima varijabli, a zatim sam pokušao promijeniti te elemente. Jedini problem je što određeni JavaScript izbornik vraća statički popis čvorova. Kako to nije živo predstavljanje elemenata, nisam ih bio u mogućnosti naknadno promijeniti.

pretpostavke

Pretpostavljam da je u ovom članku nekoliko stvari istinito:

  • Radite u "običnom ili vanilijevom" JavaScript-u (bez okvira / knjižnice)
  • Imate osnovno razumijevanje JavaScript elemenata / odabirača
  • Imate osnovno razumijevanje DOM-a

Nitty-gritty

U slučaju da pretpostavim previše, u članku sam dao linkove na relevantni materijal za koje se nadam da će biti korisni.

JavaScript je tako ogroman i bogat ekosustav da ne čudi da na isti način postoji isti način. Ovisno o vašem zadatku, način na koji se izvršava je važan u određenoj mjeri.

Možete iskopati rupu rukama, ali mnogo je lakše i učinkovitije to napraviti lopatom.

U tu svrhu nadam se da ću vam "pružiti lopatu" nakon što pročitate ovaj članak.

Odabir pravog alata za posao

Imao sam nekoliko pitanja "Koji selektor elementa trebam koristiti?" Nekoliko puta. Do sada nisam imao puno želje ili potrebe da naučim razliku sve dok moj kod daje željeni rezultat. Konačno, kakva je boja taksija sve dok vas sigurno i pravovremeno dovede na vaše odredište ... 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 ovi koji su ovdje navedeni daleko su najrašireniji način na koji sam naišao.

document.getElementById ()

Oni će uvijek vratiti samo jedan (1) element jer su, po svojoj prirodi, ID-ovi jedinstveni i istovremeno može postojati samo jedan (s istim nazivom).

Vraća objekt koji odgovara nizu koji je prošao u njega. Vraća se nulano ako se u vašem HTML-u ne nađe odgovarajući ID.

Primjer sintakse -> document.getElementById ('main_content')

Za razliku od nekih odabirača o kojima ćemo doći kasnije u članku, nije potrebno # da označavamo element elementa.

document.getElementsByTagName ()

Primijetite "S" u elementima - ovaj selektor vraća višestruko u strukturu nalik nizu koja je poznata i kao HTML kolekcija - čitav se dokument traži, uključujući korijenski čvor (objekt dokumenta) radi odgovarajućeg naziva. Selektor elemenata započinje pri vrhu dokumenta i nastavlja prema dolje tražeći oznake koje odgovaraju unesenom nizu.

Ako želite koristiti izvorne metode matrice, nema vam sreće. To jest, osim ako ne pretvorite vraćene rezultate u niz da ih ponovite ili ne koristite ES6 operator za širenje - oba su izvan dosega ovog članka. Ali želio sam da znate da je moguće koristiti metode niza ako to želite.

Primjer sintakse -> document.getElementsByTagName ('header_links'). Ovaj odabir također prihvaća p, div, body ili bilo koju drugu valjanu HTML oznaku.

document.getElementsByClassName ()

Birač imena klase - ponovno primijetite "S" u elementima - ovaj selektor vraća multiplekse u strukturu sličnu nizu koja je poznata i kao HTML zbirka imena klasa. Odgovara prenesenom nizu (može zauzeti više imena klase, iako su razdvojeni razmakom), pretražuje sav dokument, može biti pozvan na bilo koji element i vraća samo potomke prosljeđenih u klasi.

Također, ne. (razdoblje) je potrebno za označavanje naziva klase

Primjer sintakse -> document.getElementsByClassName ('className')

document.querySelector ()

Ovaj će selektor vratiti samo jedan (1) element.

Vratit će se samo prvi element koji odgovara prenesenom nizu. Ako se ne pronađu podudaranja za pruženi niz, null se vraća.

Primjer sintakse -> document.querySelector ('# side_note') ili document.querySelector ('.. Header_links')

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 odabirom.

document.querySelectorAll ()

Ovaj selektor vraća multiplekse koji odgovaraju prenesenom nizu i raspoređuje ih u drugi niz poput strukture poznate kao popis čvorova.

Kao i u nekim prethodnim primjerima, popis čvorova ne može koristiti nativne metode matrice poput .forEach (). Ako ih želite koristiti, prvo morate pretvoriti popis čvorova u niz. Ako ne želite pretvoriti, još uvijek možete ponoviti popis čvorova s ​​naredbom for….

Proslijeđeni niz mora odgovarati važećem CSS izborniku - id, imena klasa, vrste, atributi, vrijednosti atributa itd.

Primjer sintakse -> document.querySelectorAll ('. Footer_links')

Završavati

Odabirom pravog odabirača za vaše potrebe kodiranja, izbjeći ćete mnoge zamke u koje sam upao. 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 donaciji nekih pljeska kako biste i drugi mogli da ga pronađu. Objavljujem (aktivno upravljajući svojim rasporedom da pišem više) povezani sadržaj na svom blogu. Također sam aktivan na Twitteru i uvijek se rado povežem s drugim programerima!