Selectores en JavaScript

Muchas veces usamos jQuery por facilidad a la hora de seleccionar elementos del DOM, y poder trabajar con ellos. Pero, podemos acceder a los mismos elementos de formas similares con puro JavaScript; utilizando los Selectores getElementById, getElementsByTagNames y getElementsByClassName además de los muy poco conocidos querySelector y querySelectorAll.

¿Para qué sirve y cómo usar querySelector?

Si hemos trabajado con los selectores en CSS; entonces nos resultará muy fácil trabajar con este selector de JavaScript, ya que nos permite obtener los elementos usando la misma sintaxis que aplicamos cuando creamos nuestras reglas en CSS; con querySelector podemos obtener el primer elemento del DOM que haga match con lo que le pasamos. Funciona exactamente igual que los selectores de jQuery.

Ejemplo del uso del querySelector

<ul id="ejemplo1"> 
  <li class="uno" id="uno"> uno </li> 
  <li class="dos" id="dos"> dos </li> 
  <li class="tres" id="tres"> tres </li> 
  <li class="cuatro" id="cuatro"> cuatro </li> 
</ul> 
document.querySelector('#ejemplo1 li'); 
// nos trae <li class="uno" id="uno"> uno </li>
document.querySelector('#ejemplo1 .uno'); 
//nos trae <li class="uno" id="uno" > uno </li>
document.querySelector('#ejemplo1 #dos.dos'); 
//nos trae <li class="dos" id="dos" > dos </li>
document.querySelector('#ejemplo1 > #dos.dos');
//nos trae <li class="dos" id="dos" > dos </li>

¿Para qué sirve y cómo usar querySelectorAll?

querySelectorAll funciona de la misma manera que el selector anterior (querySelector), pero nos trae todos los elementos que coincidan con la condición dada, en vez de solo el primero elemento; dicha colección de elementos será representada en un array.

Ejemplo de uso del querySelectorAll

<ul id="ejemplo2"> 
  <li class="uno" id="uno" > uno </li> 
  <li class="dos" id="dos" > dos </li> 
  <li class="tres" id="tres" > tres </li> 
  <li class="cuatro" id="cuatro" > cuatro </li> 
</ul> 
document.querySelectorAll('#ejemplo2 li'); 
/*
  nos trae un array con los elementos que cumplan la condición anterior
[
<li class="uno" id="uno"> uno </li>, 
<li class="dos" id="dos"> dos </li>, 
<li class="tres" id="tres"> tres </li>, 
<li class="cuatro" id="cuatro"> cuatro </li>
]
*/

¿Para qué sirve y cómo usar GetElementById?

Este método nos permite obtener un elemento del DOM segun el valor del atributo id del mismo:

document.getElementById(<id_elemento>)

Ejemplo de uso de getElementById

Para el siguiente elemento:

<div id='div_id' > div con id='div_id' </div> 

Lo podríamos obtener de la siguiente forma:

document.getElementsById("div_id")

¿Para qué sirve y cómo usar getElementsByTagName?

Este método nos permite obtener todos los elementos del DOM segun el nombre de la etiqueta del elemento; la colección de elementos será devuelta en un array.

document.getElementsByTagName(<nombre_etiqueta_elemento>)

Ejemplo de uso de getElementsByTagName

Para el siguiente elemento:

<p> etiqueta p 1 </p> 
<h2> etiqueta h2 </h2> 
<p> etiqueta p 2 </p> 

Lo podríamos obtener de la siguiente forma:

document.getElementsByTagName("p")
/*
  nos trae un array cuyo tag name (nombre etiqueta) sea p
[
<p> etiqueta p 1 </p>, 
<p> etiqueta p 2 </p> 
]
*/

¿Para qué sirve y cómo usar getElementsByClassName?

Este método nos permite obtener todos los elementos del DOM segun el valor del atributo class del mismo; dicha colección será devuelta en un array.

document.getElementById(<class_elemento>)

Ejemplo de uso de getElementsByClassName

<p class='miclase' > p con class='miclase' </p> 
<h1 class='miclase' > h1 con class='miclase' </h1> 
<p class='otraclase' > p con class='otraclase' </p> 
<p class='miclase' > p con class='miclase' </p> 
<p class='miclase' > p con class='miclase' </p> 
document.getElementsByClassName("miclase")
/*
  nos trae un array con los elementos cuya clase sea 'miclase'
[
<p class='miclase' >p con class='miclase' </p>,
<h1 class='miclase' >h1 con class='miclase' </h1>>,
<p class='miclase' >p con class='miclase' </p>,
<p class='miclase' >p con class='miclase'</p>
]
*/

Conclusión

Como podemos ver; tenemos muchas formas diferentes de acceder fácilmente a los elementos del DOM; sin utilizar ningún framework como jQuery y las repercusiones que esto nos traería.

Nota: El atributo id debe ser único en cada página HTML.

4+1 selectores CSS esenciales al momento de programar

En esta entrada les mostraré los principales selectores empleados por mi persona al momento de armar una Hoja de Estilo en Cascada, de una forma u otra se han vuelto imprescindibles o esenciales en la creación de la misma.

¿Sabías que...? Con los selectores podemos ahorrar mucho trabajo y evitar así "inventar" nombres a través de clases o identificadores para referenciar o seleccionar elementos.

4+1. A[href*="github.com"]

Este selector es muy útil cuando queremos aplicar diferentes estilos según la URL que referencia el enlace; por ejemplo, si quisiéramos agregar algún detalle extra como un icono al principio del enlace:

a[href*="github.com"]:before {
  content:url("github-logo.png")
}
a[href*="google.com"]:before {
  content:url("google.png")
}

Y con un poco más de CSS podemos obtener algo como lo siguiente:

GitHub 

Google 

Ver ejemplo Descargar

4. A > B

Este otro selector conocido como selector de hijos, es muy útil cuando queremos aplicar diferentes estilos en distintos hijos o niveles; es muy utilizado al momento de crear menús multiniveles como el siguiente:

• Inicio
• Nuevo
  • Inicio
  • Nuevo
  • Sobre nosotros
• Sobre nosotros

Ver ejemplo

Por ejemplo si quisiéramos aplicar un estilo solamente a las listas li dentro del ul más interno cuya característica principal es el fondo de color rojo:

ul > li > ul {
   padding:10px;
   background:#F00;
}

Ahora parte de la definición del estilo del ul más externo:

ul{
    background:#CCC;
}

Quedando de la siguiente manera nuestro ejemplo:

3. A:visited

Volviendo con los enlaces, abras notado cada vez que visitas una página web por ejemplo en Google tienen un color diferente:

Este selector permite obtener aquellos enlaces que se han visitado y cambiar el estilo; por ejemplo el color del texto:

a:visited { color: #609; }

A, B, C

Este selector permite ahorrar muchas líneas y redundancia de código CSS permitiendo encadenar selectores y heredar el estilo que se tenga en común:

h1, h2, h3 {
  color: #FF0000;
  font-family: Arial;
}

Para aplicar el resto de los estilos a los selectores diferentes:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

1. A:nth-child(N)

Aquí tenemos un increíble selector el cual permite seleccionar elementos por orden; por ejemplo, si tenemos el siguiente código HTML:

<ul>
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  <li>Séptimo</li>
</ul>

Es muy útil cuando queremos aplicar estilos diferentes a las celdas o filas de las tablas, listas, etc; además permite emplear fórmulas como 2n+1 para obtener ciertos elementos que sigan un patrón; más información en: La pseudo-class nth-child en CSS.

ul.nth_numerica li:nth-child(1), 
ul.nth_numerica li:nth-child(3) {
    background: #999;
}

Conclusiones

En esta entrada hemos visto algunos de los muchos selectores que existen en CSS que considero de los más importantes o esenciales en orden de relevancia o importancia pero por supuesto existen muchísimos más que pueden resultar útil según el objetivo que se desea lograr.

Selector CSS y JavaScript :has - pseudoclase Condicional

▶

Te voy a mostrar una implementación del selector CSS :has() y cómo me permitió resolver un pequeño problema de diseño que tenía. La ventaja de este selector, relativamente nuevo, es su capacidad para simplificar consultas complejas.

️ El Problema del Formato de las Imágenes y Texto

Este contenido es del visor de libros de mi aplicación Academia. El texto del libro fue importado a la web como HTML limpio, heredado de Google Docs, lo que resultó en una estructura de imagen y pie de foto muy específica:

<p><span><img src="..." alt="" width="..." height="..." title=""></span></p>
<p><span>Figura 1-1: Ventana de Laravel Herd en MacOS</span></p>

Mi meta: Lograr que el párrafo que contiene la "Figura 1-1: Ventana de Laravel Herd en MacOS" (el pie de foto) esté centrado.

El problema de poder seleccionar un elemento HTML consecutivo

En el HTML, la imagen está dentro de un párrafo (<p>) y el pie de foto está en el párrafo siguiente. El problema es que el pie de foto no tiene ninguna clase que lo distinga de cualquier otro párrafo normal en el texto, y CSS no tiene un selector nativo que me permita seleccionar un elemento basándose en lo que contiene su hermano anterior.

Lo que necesito: Seleccionar el párrafo que es hermano inmediato del párrafo que contiene una imagen.

Funcionamiento del Selector :has()

El selector :has() es como un condicional. Te permite seleccionar un elemento (el padre o contenedor) basado en si contiene o no (el hijo) un selector específico.

El Selector Tradicional

Si usáramos la sintaxis tradicional para seleccionar la imagen, la consulta nos devolvería el elemento más específico, que es la propia imagen:

document.querySelector(".post p img") // Devuelve el elemento <img>:

<p><span><img src="/images/example/libros/laravel/image24.png" alt="" width="247" height="410" title=""></span></p>

Esto es un problema, ya que la imagen no es hermana del pie de foto. Su padre (el párrafo) sí lo es, pero no podemos seleccionar al padre para luego volver a seleccionar al hijo.

La Solución Selector con :has()

Aquí es donde entra el selector :has(). En lugar de devolver el elemento <img>, le pedimos que nos devuelva el párrafo (<p>) que contiene la imagen (<img>). El :has(img) actúa como una condición:

// Nos devuelve el elemento <p> que contiene el <img>
document.querySelector(".post p:has(img)") 

<p><span><img src="/images/example/libros/laravel/image24.png" alt="" width="247" height="410" title=""></span></p>

Con esto, nuestra referencia de selección pasa a ser el párrafo de la imagen, que es el hermano del párrafo del pie de foto.

Implementación Final

Al poder seleccionar el párrafo que contiene la imagen (el hermano anterior), ya podemos usar el selector de hermano adyacente (+) para apuntar al párrafo del pie de foto.

El selector de hermano adyacente (+) selecciona un elemento que es colocado inmediatamente después de un elemento específico, siempre y cuando ambos tengan el mismo padre.

// Devuelve el <p> que está inmediatamente después del <p> que tiene una <img>
document.querySelector(".post p:has(img) + p") 

El Estilo en CSS

Finalmente, en CSS, la solución para centrar el pie de foto es la siguiente:

<style>
.post p:has(img) + p {
 text-align: center;
}
</style>

Esta implementación nos permite centrar ese párrafo específico sin tener que añadir clases en el HTML ni modificar la estructura heredada del libro. Es una demostración perfecta de cómo :has() permite hacer consultas mucho más elaboradas y resolver problemas que antes eran imposibles solo con CSS nativo.