Kuidas vältida pettumust, valides õige JavaScripti valija

Kiirjuhend, kuidas valijad teie koodi mõjutavad

“Ilus päikeseloojang pilves taevas, valatud rahuliku ookeani kohale.” Sebastien Gabriel saidil Unsplash

Projekti kallal töötades sattusin oma koodi probleemile. Proovisin määratleda HTML-i mitu elementi kollektsiooni ja seejärel muuta neid elemente, tuginedes mõnele eelseatud tingimusele. Võitlesin umbes neli tundi kodeerimise aega (kahe päeva jooksul), siludes oma koodi ja püüdes aru saada, miks ma ei saanud soovitud tulemust.

Selgub, et olin oma elementide muutujale määramiseks kasutanud dokumenti.querySelectorAll () ja siis üritasin neid elemente muuta. Ainus probleem on see, et konkreetne JavaScripti valija tagastab staatilise sõlmede loendi. Kuna see ei ole elementide reaalajas esitus, ei saanud ma neid hiljem oma koodis muuta.

Eeldused

Selles artiklis eeldan, et mõned asjad peavad paika:

  • Töötate JavaScripti (tavaline või vanilje) (puudub raamistik / raamatukogu)
  • Teil on JavaScripti elementide / valijate põhiteadmised
  • Teil on põhiline arusaam DOM-ist

Nitty-sõmer

Juhul, kui olen liiga palju oletanud, olen lisanud artikli lingid asjakohase materjali juurde, millest ma loodan, et sellest on abi.

JavaScript on nii lai ja rikkalik ökosüsteem, et pole üllatav, et sama ülesande täitmiseks on palju võimalusi. Sõltuvalt teie ülesandest on selle täitmise viis teatud määral oluline.

Võite oma kätega auku kaevata, kuid seda on kühvliga teha palju lihtsam ja tõhusam.

Sel eesmärgil loodan pärast seda artiklit lugedes teile labida kätte anda.

Khürt Williams

Tööks sobiva tööriista valimine

Mul on mitu korda olnud küsimus „millist elemendi valijat ma peaksin kasutama?“. Siiani pole mul palju tahtmist ega vajadust erinevusi teada saada, kui mu kood andis soovitud tulemuse. Lõppude lõpuks, mis värvi on takso, kui see viib teid ohutult ja õigeaegselt sihtkohta?

Alustame mõnega DOM-i elementide valimiseks JavaScriptis. Elementide valimiseks on rohkem võimalusi (ma usun), kuid siin loetletud on ülekaalukalt levinumad.

document.getElementById ()

Need tagastavad kunagi ainult ühe (1) elemendi, kuna nende olemuse tõttu on ID-d unikaalsed ja korraga saab lehel olla ainult üks (sama nimega).

Tagastab objekti, mis vastab sellele edastatud stringile. Kui teie HTML-ist ei leita sobivat ID-d, tagastatakse see nulli.

Süntaksi näide -> document.getElementById ('main_content')

Erinevalt mõnest valijast, mille juurde me hiljem artiklis jõuame, pole elemendi ID tähistamiseks vaja numbrit #.

document.getElementsByTagName ()

Pange tähele elementide S-i - see valija tagastab kordsed massiivilaadses struktuuris, mida tuntakse HTML-kogumina - kogu dokumendi jaoks otsitakse koos vastavale nimele juursõlmega (dokumendiobjekt). See elemendi valija algab dokumendi ülaosast ja jätkub allapoole, otsides silte, mis vastavad edastatud stringile.

Kui soovite kasutada maatriksmeetodeid, pole teil õnne. See tähendab, et kui teisendate tagastatud tulemused massiiviks, et neid korrata, või kasutate ES6 hajutatud operaatorit - mõlemad ei kuulu selle artikli reguleerimisalasse. Kuid ma tahtsin, et te teaksite, et soovi korral on võimalik kasutada massiivi meetodeid.

Süntaksi näide -> document.getElementsByTagName ('header_links'). See valija aktsepteerib ka p, div, keha või mõnda muud kehtivat HTML-i silti.

document.getElementsByClassName ()

Klassi nime valija - märkige jällegi elementides S-täht - see valija tagastab mitu korda massiivilaadses struktuuris, mida nimetatakse klassinimede HTML-kogumiks. See sobib sisestatud stringiga (võib võtta mitu klassinime, ehkki neid eraldab tühik), otsib kogu dokumendi, sellele saab helistada mis tahes elemendil ja tagastab klassis ainult möödunud järeltulijaid.

Samuti ei. (periood) on vajalik klassi nime tähistamiseks

Süntaksi näide -> document.getElementsByClassName ('className')

document.querySelector ()

See valija tagastab ainult ühe (1) elemendi.

Tagastatakse ainult esimene element, mis vastab sisestatud stringile. Kui pakutud stringi vasteid ei leita, tagastatakse null.

Süntaksi näide -> document.querySelector ('# side_note') või document.querySelector ('. Header_links')

Erinevalt kõigist meie eelmistest näidetest nõuab see valija a. (periood) klassi tähistamiseks või # (oktotorp) ID tähistamiseks ja töötab kõigi CSS-i valijatega.

document.querySelectorAll ()

See valija tagastab korduskorrad, mis vastavad sisestatud stringile, ja paigutab need teise massiivi sarnasesse struktuuri, mida tuntakse sõlmeloendina.

Nagu mõnes eelmises näites, ei saa sõlmeloendis kasutada natiivseid massiivimeetodeid, näiteks .forEach (). Nii et kui soovite neid kasutada, peate kõigepealt teisendama sõlmeloendi massiiviks. Kui te ei soovi teisendada, saate ikkagi itereerida sõlmeloendis, kasutades väljal ... jaoks.

Stringis läbitud peab vastama kehtivale CSS-i valijale - id, klasside nimed, tüübid, atribuudid, atribuutide väärtused jne.

Süntaksianäide -> document.querySelectorAll ('. Jaluse_lingid')

Pakkimine üles

Valides oma kodeerimisvajaduste jaoks sobiva valiku, väldite paljusid puudusi, kuhu olen sattunud. Kui teie kood ei tööta, võib see olla uskumatult masendav, kuid tagades, et valija vastab teie situatsioonilistele vajadustele, pole teil probleeme oma labidaga kaevamisega :)

Täname, et lugesite selle postituse läbi. Kui teile see meeldis, kaaluge mõne klambri annetamist, et aidata ka teistel seda leida. Avaldan (haldan aktiivselt oma ajakava, et kirjutada rohkem) oma blogis seotud sisu. Olen aktiivne ka Twitteris ja olen alati õnnelik, et saan teiste arendajatega ühendust!