Hogyan lehet elkerülni a frusztrációt a megfelelő JavaScript-választó kiválasztásával

Rövid útmutató arról, hogy a választók hogyan befolyásolják a kódot

Míg dolgoztam egy projekten, belefutottam egy kérdésbe a kódomban. Megpróbáltam több HTML elemet meghatározni egy gyűjteményben, majd ezeket az elemeket néhány előre beállított feltétel alapján megváltoztatni. Nagyjából négy órán át (két nap alatt) kódolva küzdöttem a kód hibakeresésén, és megpróbáltam rájönni, miért nem értem el a kívánt eredményt.

Kiderült, hogy a document.querySelectorAll () függvényt használtam az elemeim hozzárendeléséhez egy változóhoz, majd megpróbáltam megváltoztatni ezeket az elemeket. Az egyetlen probléma az, hogy az adott JavaScript-választó statikus csomópont-listát ad vissza . Mivel ez nem az elemek élő ábrázolása, később nem tudtam megváltoztatni őket a kódomban.

Feltételezések

Ebben a cikkben feltételezem, hogy néhány dolog igaz:

  • „Sima vagy vaníliás” JavaScript-sel dolgozik (nincs keretrendszer / könyvtár)
  • Alapvetően ismeri a JavaScript elemeket / kiválasztókat
  • Alapvető ismerete van a DOM-ról

A csicskás

Abban az esetben, ha túl sokat feltételeztem, linkeket adtam a cikk releváns anyagaihoz, amelyek remélem hasznosak lesznek.

A JavaScript olyan hatalmas és gazdag ökoszisztéma, hogy nem meglepő, hogy ugyanazon feladat végrehajtásának számos módja van. Feladatától függően bizonyos fokig számít a teljesítés módja.

Lyukat áshat a kezével, de sokkal könnyebb és hatékonyabb ezt lapáttal megtenni.

Ennek érdekében remélem, hogy "átadok egy lapátot", miután elolvasta ezt a cikket.

A munkához megfelelő eszköz kiválasztása

Felmerült a kérdés: "Melyik elemválasztót használjam?" többször. Eddig nem volt sok vágyam vagy szükségem a különbségek megtanulására, amíg a kódom a kívánt eredményt hozta. Végül is mit számít a taxi színe, amennyiben biztonságosan és időben eljut az úticéljához ... ugye?

Kezdjük a DOM elemek JavaScript-ben történő kiválasztásának néhány módjával . Az elemek kiválasztásának több módja van (úgy gondolom), de az itt felsoroltak messze a legelterjedtebbek, amelyekkel találkoztam.

document.getElementById ()

Ezek csak egy (1) elemet fognak visszaadni, mivel jellegüknél fogva az azonosítók egyediek, és az oldalon egyszerre csak egy (azonos nevű) lehet.

Visszaad egy objektumot, amely megegyezik a benne megadott karakterlánccal. Ez vissza null , ha nem találtunk megfelelő azonosítót eredményezett a HTML.

Szintaxis példa - & g t; document.getElementById ('main_conten t')

Néhány szelektorral ellentétben, amelyekre később a cikkben térünk ki, nincs szükség # -ra az elemazonosító jelölésére.

document.getElementsByTagName ()

Figyelje meg az „S” elemeket - ez a választó többszöröseket ad visszaegy tömb-szerű szerkezetHTML-gyűjtemény néven ismert - az egész dokumentumot megkeresi, beleértve a gyökércsomópontot (a dokumentumobjektumot) egyező nevet. Ez az elemválasztó a dokumentum tetején kezdődik, és lefelé folytatva keresi az átadott karakterláncnak megfelelő címkéket.

Ha natív tömb módszereket akar használni, akkor nincs szerencséje. Vagyis, hacsak nem konvertálja a visszaküldött eredményeket tömbökké, hogy ismétlődjön rajtuk, vagy használja az ES6 spread operátort - mindkettő kívül esik a cikk hatályán. De szerettem volna, ha tudod, hogy lehet tömb metódusokat használni, ha akarod.

Szintaxis példa - & g t; document.getElementsByTagName ('header_li nks '). Ez a választó elfogadja a ts p, div, body vagy bármely más érvényes HTML t ag elemet is.

document.getElementsByClassName ()

Osztálynév választó - ismét vegye észre az „S” -t az elemekben - ez a választó többszöröseket ad visszaegy tömb-szerű szerkezetosztálynevek HTML gyűjteményeként ismert. Megfelel a beírt karakterláncnak (több osztálynevet is felvehet, bár szóköz választja el őket), az egész dokumentumot megkeresi, bármely elemre meghívható, és csak az osztályban az átadott utódokat adja vissza.

Továbbá, nem. (pont) szükséges az osztály nevének jelölésére

Szintaxis példa: document.getElementsByClassName ('classNam e')

document.querySelector ()

Ez a választó csak egy (1) elemet ad vissza.

Csak a beírt karakterláncnak megfelelő első elem kerül visszaadásra. Ha nem található egyezés a megadott karaktersorozattal, nullvisszatér.

Szintaxis példa: document.querySelector ('# side_note ') vagy document.querySelector ('. Header_link s')

Minden korábbi példánkkal ellentétben ez a választó a. (pont) osztály jelölésére vagy # (oktotorp) az azonosító jelölésére, és minden CSS-választóval működik.

document.querySelectorAll ()

Ez a választó többszöröseket ad vissza, amelyek megfelelnek az átadott karakterláncnak, és egy másik tömbszerű struktúrába rendezi őket , amely csomópontlista néven ismert.

Csakúgy, mint néhány korábbi példában, a csomópontlista sem használhatja a natív tömb metódusokat, mint például .forEach (). Tehát, ha ezeket használni szeretné, akkor először a csomópont listát kell tömbré konvertálni. Ha nem kíván konvertálni, akkor is folytathatja a csomópontlista átrendezését a for… utasítással.

A karakterláncban átadottnak meg kell egyeznie egy érvényes CSS-választóval - azonosítóval, osztálynevekkel, típusokkal, attribútumokkal, az attribútumok értékeivel stb.

Szintaxis példa: document.querySelectorAll ('. Footer_link s')

Csomagolás

Ha a kódoló igényeinek megfelelő választót választja, elkerülheti számos buktatót, amelyekbe beleestem. Hihetetlenül elkeserítő lehet, ha a kód nem működik, de ha biztosítja, hogy a választó megfeleljen a helyzet szükségleteinek, akkor nem okoz gondot "ásni a lapátjával" :)

Köszönjük, hogy végigolvastad ezt a bejegyzést. Ha tetszett, kérjük, fontolja meg néhány taps adományozását, hogy mások is megtalálják. A blogomon közzéteszem (aktívan kezelem az ütemezésemet, hogy még többet írjak) kapcsolódó tartalmat. A Twitteren is aktív vagyok, és mindig szívesen lépek kapcsolatba más fejlesztőkkel!