Comparte en Facebook Twitter Google+

Javascript selectors

El uso de “selectores” en JavaScript permite encontrar y seleccionar elementos del DOM bien sea para extraer información de cada nodo o para manipularlos de ser necesario.

Estos selectores funcionan de forma  muy similar a los selectores que se usan en CSS, como veremos a continuación:

Utilizando JavaScript podemos encontrar un elemento de la siguiente manera:

En este caso, se obtiene el nodo por medio del id #myDiv. En caso de que se desee obtener una lista de nodos que compartan una misma característica, como por ejemplo un nombre de clase, o tipo de elemento, se puede utilizar lo siguiente:

El método document.querySelector(selector) devuelve un único nodo en caso de encontrar una coincidencia con el criterio de búsqueda mientras que document.querySelectorAll(selector) devuelve una lista de nodos, incluso si solo se encuentra una sola coincidencia.

Es posible que se desee realizar una búsqueda un poco más compleja combinando una o más características que pudiera contener el nodo que se desea obtener.

Si se quiere obtener el div con clase divClass que a su vez sea activese pueden combinar ambos criterios de la siguiente manera:

La ventaja de comprender un poco más a fondo cómo funcionan estos selectores, es que se pueden utilizar para acceder a un nodo con criterios muy específicos, sin necesidad de hacer una búsqueda genérica y luego tratar de filtrar cada resultado:

Veamos un ejemplo más práctico

Vamos a construir una herramienta de debug que permita verificar si se están cumpliendo con algunas reglas de SEO más comunes dentro del contenido de una página, como el uso de la propiedad alt en etiquetas <img>, que todos los enlaces internos contengan el protocolo https, que los enlaces externos abran en una nueva pestaña, etc.

Lo primero que haremos será crear una lista de reglas y un mensaje que acompañe a cada resultado, es decir, si por ejemplo se encuentra algún enlace interno sin https:// , obtener algo de información al respecto.

Ahora necesitamos una función que busque los nodos que coinciden con cada uno de los selectores y en caso de encontrarlo muestre el mensaje definido para cada regla.

Finalmente debemos hacer que esta función se ejecute para cada regla contenida en el objeto debugRules

Tomando este código HTML como ejemplo

El resultado en la terminal del navegador es el siguiente:

javascript-selectors

Con este pequeño ejemplo puedes comenzar a crear un herramienta de debug para verificar el código HTML de tu aplicación.

Aquí puedes ver una lista de los selectores más usados:

  • E#myid  un elemento E con ID igual a myid.
  • E[foo]  un elemento E con un atributo foo
  • E[foo="bar"]  un elemento E cuyo valor de atributo foo es exactamente igual a bar
  • E[foo="bar" i] un elemento E cuyo valor de atributo foo es exactamente igual a cualquier permutación de caso (rango ASCII) de bar
  • E[foo~="bar"] un elemento E cuyo valor de atributo foo es una lista de valores separados por espacios en blanco, uno de los cuales es exactamente igual a bar
  • E[foo^="bar"] un elemento E cuyo valor de atributo foo comienza exactamente con el string bar
  • E[foo$="bar"] un elemento E cuyo valor de atributo foo finaliza exactamente el string bar
  • E[foo*="bar"] un elemento E cuyo valor de atributo foo contiene el substring bar
  • E[foo|="en"]  un elemento E cuyo valor de atributo foo es una lista de valores separados por guiones que comienzan con “en”
  • E:visited un elemento E que es el origen de un hipervínculo cuyo destino ya se ha visitado
  • E:not(s1, s2) un elemento E que no coincide con el selector compuesto s1 o el selector compuesto s2
  • E:matches(s1, s2) un elemento E que coincide con el selector compuesto s1 y / o el selector compuesto s2
  • E:something(s1, s2) un elemento E que coincide con el selector compuesto s1 y / o el selector compuesto s2, pero no aporta especificidad.
  • E:has(rs1, rs2)  un elemento E, si cualquiera de los selectores relativos rs1 o rs2, cuando se evalúa con E como los elementos del “:scope”, coincide con un elemento

Puedes encontrar una documentación más completa sobre este tema en la W3C Editor’s Draft’s

 

Aprovecha nuestra promoción activa y únete a Styde por menos de 10 USD al mes: ver planes semestral y anual.