Sådan undgår du frustration ved at vælge den rigtige JavaScript-vælger

En hurtig guide til, hvordan vælgere påvirker din kode

”En smuk solnedgang i en overskyet himmel, kastet over et roligt hav.” Af Sebastien Gabriel på Unsplash

Mens jeg arbejdede på et projekt, fik jeg et problem i min kode. Jeg forsøgte at definere flere HTML-elementer i en samling og derefter ændre disse elementer baseret på nogle forudindstillede betingelser. Jeg kæmpede i cirka fire timers kodetid (på tværs af to dage) med fejlfinding af min kode og prøvede at finde ud af, hvorfor jeg ikke fik det ønskede resultat.

Det viser sig, at jeg havde brugt document.querySelectorAll () til at tildele mine elementer til en variabel, og derefter forsøgte jeg at ændre disse elementer. Det eneste problem er, at særlig JavaScript-vælger returnerer en statisk nodeliste. Da det ikke er en direkte repræsentation af elementerne, kunne jeg ikke ændre dem senere i min kode.

Forudsætninger

I denne artikel antager jeg, at et par ting er sandt:

  • Du arbejder i "almindelig eller vanilje" JavaScript (ingen rammer / bibliotek)
  • Du har en grundlæggende forståelse af JavaScript-elementer / vælgere
  • Du har en grundlæggende forståelse af DOM

Nitty-gritty

I tilfælde af at jeg har antaget for meget, har jeg leveret links til relevant materiale i artiklen, som jeg håber vil være nyttigt.

JavaScript er et så stort og rigt økosystem, at det ikke er nogen overraskelse, at der er mange måder at udføre den samme opgave. Afhængig af din opgave betyder den måde, den udføres på, en vis grad.

Du kan grave et hul med dine hænder, men det er meget lettere og mere effektivt at gøre det med en spade.

Med henblik herpå håber jeg at "give dig en spade", når du har læst denne artikel.

“Et langt eksponeringsbillede af en gruppe mennesker på en strand med børn, der grave et dybt hul” af Khürt Williams på Unsplash

Valg af det rigtige værktøj til jobbet

Jeg har haft spørgsmålet "Hvilken elementvælger skal jeg bruge?" Flere gange. Indtil nu har jeg ikke haft meget lyst eller behov for at lære forskellen, så længe min kode gav det ønskede resultat. Når alt kommer til alt, hvad betyder taxaens farve, så længe den kommer dig til din destination sikkert og rettidigt ... ikke?

Lad os starte med nogle af måderne til at vælge DOM-elementer i JavaScript. Der er flere måder (tror jeg) at vælge elementer på, men dem, der er anført her, er langt den mest udbredte, jeg har fundet.

document.getElementById ()

Disse vil kun nogensinde returnere et (1) element, fordi ID'erne i deres natur er unikke, og der kun kan være et (med samme navn) på siden ad gangen.

Det returnerer et objekt, der matcher den streng, der er sendt ind i den. Det returnerer null, hvis der ikke findes nogen matchende ID i din HTML.

Syntakseksempel -> document.getElementById ('main_content')

I modsætning til nogle vælgere, som vi senere kommer til i artiklen, er der ikke behov for et # for at angive element-id.

document.getElementsByTagName ()

Bemærk “S” i elementer - denne vælger returnerer multipla i en array-lignende struktur kendt som en HTML-samling - alt dokumentet søges inklusive rodnoden (dokumentobjektet) for et matchende navn. Denne elementvælger starter øverst i dokumentet og fortsætter ned og søger efter tags, der matcher den indleverede streng.

Hvis du søger at bruge native array-metoder, er du heldig. Det vil sige, medmindre du konverterer de returnerede resultater til en matrix for at itereere over dem, eller bruger ES6-spredningsoperatøren - som begge er uden for denne artikels rækkevidde. Men jeg ville have dig til at vide, at det er muligt at bruge arraymetoder, hvis du ønsker det.

Syntakseksempel -> document.getElementsByTagName ('header_links'). Denne vælger accepterer også p, div, body eller ethvert andet gyldigt HTML-tag.

document.getElementsByClassName ()

Klassens navnevælger - bemærk igen “S” i elementer - denne vælger returnerer multipla i en array-lignende struktur kendt som en HTML-samling af klassens navne. Det matcher den indleverede streng (kan tage flere klassenavne, selvom de er adskilt med et mellemrum), søger i hele dokumentet, kan kaldes på ethvert element og returnerer kun efterkommere af de beståede i klassen.

Nej. (periode) er nødvendig for at angive klassens navn

Syntakseksempel -> document.getElementsByClassName ('className')

document.querySelector ()

Denne vælger returnerer kun et (1) element.

Kun det første element, der matcher den indleverede streng, returneres. Hvis der ikke findes nogen matches for den medfølgende streng, returneres null.

Syntakseksempel -> document.querySelector ('# side_note') eller document.querySelector ('. Header_links')

I modsætning til alle vores tidligere eksempler kræver denne vælger en. (periode) for at betegne klasse eller et # (octothorp) for at angive et ID og fungerer med alle CSS-vælgere.

document.querySelectorAll ()

Denne vælger returnerer multipler, der matcher den indleverede streng og arrangerer dem i en anden matrixlignende struktur kendt som en nodeliste.

Som med nogle af de foregående eksempler, kan nodelisten ikke bruge de oprindelige array-metoder som .forEach (). Så hvis du vil bruge dem, skal du først konvertere nodelisten til en matrix. Hvis du ikke ønsker at konvertere, kan du stadig iterere over noden listen med en for ... i sætning.

Den bestilte i streng skal svare til en gyldig CSS-vælger - id, klassens navne, typer, attributter, værdier af attributter osv.

Syntakseksempel -> document.querySelectorAll (‘. Footer_links’)

Afslutter

Ved at vælge den rigtige vælger til dine kodebehov, undgår du mange af de faldgruber, jeg er faldet i. Det kan være utroligt frustrerende, når din kode ikke fungerer, men ved at sikre, at din vælger matcher dine situationelle behov, har du ingen problemer med at "grave med din skovl" :)

Tak, fordi du læser gennem dette indlæg. Hvis du nød det, kan du overveje at donere nogle klapper for at hjælpe andre med at finde det også. Jeg offentliggør (aktivt administrerer min skema for at skrive mere) relateret indhold på min blog. Jeg er også aktiv på Twitter og er altid glad for at få forbindelse til andre udviklere!