Com evitar la frustració triant el selector de JavaScript adequat

Una guia ràpida sobre com els selectors afecten el vostre codi

Mentre treballava en un projecte, em vaig trobar amb un problema al meu codi. He intentat definir diversos elements HTML en una col·lecció i després canviar aquests elements en funció de determinades condicions predeterminades. Vaig lluitar amb aproximadament quatre hores de temps de codificació (més de dos dies) depurant el meu codi i descobrint per què no obtenia el resultat desitjat.

Va resultar que havia utilitzat document.querySelectorAll () per assignar els meus elements a una variable i després vaig intentar canviar-los. L'únic problema és que un determinat selector de JavaScript retornarà una llista estàtica de nodes. Com que no es tracta d'una representació en directe dels elements, no podria canviar-la més endavant al meu codi.

Supòsits

En aquest article, suposo que algunes coses són certes:

  • Esteu treballant en JavaScript "Plain or Vanilla" (sense marc / biblioteca)
  • Teniu una comprensió bàsica dels elements / selectors de JavaScript
  • Teniu una comprensió bàsica del DOM

La grana nítida

En cas que n'hagi suposat massa, he proporcionat enllaços a material rellevant de l'article que espero que siguin útils.

JavaScript és un ecosistema tan extens i extens que no és d’estranyar que hi hagi moltes maneres de realitzar la mateixa tasca. Depenent de la vostra tasca, la forma en què es realitza és important fins a cert punt.

Podeu cavar un forat amb les mans, però és molt més fàcil i eficient fer-ho amb una pala.

Amb aquest objectiu, després de llegir aquest article, espero donar-vos una pala.

Triar l'eina adequada per al treball

M'han preguntat "Quin selector d'elements he d'utilitzar?" Fins ara, no tenia ganes ni havia d’aprendre la diferència sempre que el meu codi donés el resultat que volia. Què significa el color del taxi si us portarà a destí amb seguretat i puntualitat?

Comencem amb alguns mètodes per seleccionar elements DOM a JavaScript. Hi ha (crec) més maneres de seleccionar elements, però els que s’enumeren aquí són, amb diferència, els més habituals.

document.getElementById ()

Aquests només tornen un (1) element, ja que els identificadors són únics per naturalesa i només hi pot haver un element (del mateix nom) a la pàgina.

Retorna un objecte que coincideix amb la cadena passada. Tornarà a ser nul si no es troba cap identificador coincident al vostre HTML.

Exemple de sintaxi -> document.getElementById ('main_content')

A diferència d’alguns selectors que parlarem més endavant en aquest article, no cal un # per identificar l’identificador de l’element.

document.getElementsByTagName ()

Tingueu en compte la "S" als elements. Aquest selector retorna múltiples en una estructura semblant a una matriu coneguda com a col·lecció HTML. Es busca un nom adequat a tot el document, inclòs el node arrel (l'objecte del document). Aquesta selecció d'elements comença i continua a la part superior del document. Cerca etiquetes que coincideixin amb la cadena passada.

Si voleu utilitzar mètodes de matriu natius, no teniu sort. Això només s'aplica si esteu convertint els resultats retornats a una matriu per repetir-los o si utilitzeu l'operador de distribució ES6, tots dos fora de l'abast d'aquest article. Però volia que sabéssiu que és possible utilitzar mètodes de matriu si voleu.

Exemple de sintaxi -> document.getElementsByTagName ('header_links'). Aquest selector també accepta p, div, body o altres etiquetes HTML vàlides.

document.getElementsByClassName ()

Selector de nom de classe: tingueu en compte la "S" dels elements aquí també. Aquest selector retorna múltiples en una estructura semblant a una matriu coneguda com a col·lecció HTML de noms de classes. Correspon a la cadena passada (pot prendre diversos noms de classe, tot i que estan separats per un espai), cerca tot el document, es pot cridar per qualsevol element i només retorna descendents de la classe passada.

També no. (Període) és necessari per identificar el nom de la classe

Exemple de sintaxi -> document.getElementsByClassName ('className')

document.querySelector ()

Aquest selector només retorna un (1) element.

Només es retorna el primer element que coincideix amb la cadena passada. Si no es troben coincidències per a la cadena especificada, es retornarà el valor nul.

Exemple de sintaxi -> document.querySelector ("# side_note") o document.querySelector (". Header_links")

A diferència de tots els nostres exemples anteriors, aquest selector requereix un. (Període) per indicar una classe o un # (Octothorp) per indicar una identificació i funciona amb tots els selectors CSS.

document.querySelectorAll ()

Aquest selector retorna múltiples que coincideixen amb la cadena passada i els organitza en una altra estructura semblant a una matriu anomenada llista de nodes.

Igual que amb alguns dels exemples anteriors, la llista de nodes no pot utilitzar mètodes de matriu natius com .forEach (). Per tant, si voleu utilitzar-los, primer heu de convertir la llista de nodes en una matriu. Si no voleu convertir, encara podeu recórrer la llista de nodes amb una instrucció for ... a.

La cadena passada ha de coincidir amb un selector CSS vàlid: identificador, noms de classes, tipus, atributs, valors d’atributs, etc.

Exemple de sintaxi -> document.querySelectorAll ('. Footer_links')

Embolicar

Triar el selector adequat per a les vostres necessitats de codificació evitarà moltes de les trampes que he tingut. Pot ser molt frustrant quan el vostre codi no funciona. Tanmateix, si us assegureu que el selector s'adapti a les vostres necessitats situacionals, podeu "cavar" fàcilment amb la pala :)

Gràcies per llegir aquest post. Si us ha agradat, penseu en fer algunes donacions de xafarderies perquè altres també les puguin trobar. Publico (gestiono activament la meva programació per escriure més) contingut relacionat al meu bloc. També estic actiu a Twitter i sempre estic encantat de posar-me en contacte amb altres desenvolupadors.