Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Seleccionar elementos con querySelector de JavaScript

Estamos muy acostumbrados a usar frameworks para acceder a consultas complejas en el DOM (normalmente con jQuery) y hemos pasado por alto que existe dos funciones muchísimo más potentes, simples y optimizadas para realizar la misma labor.
De forma nativa nuestro navegador soporta querySelector() y querySelectorAll(), que nos devuelve elementos de nuestra web especificando selectores CSS.

En la versión simple (querySelector) tras especificar un selector nos devuelve el primer elemento resultante, mientras que la función terminada con "All" nos devuelve un Array con los elementos resultantes.
Aunque pensamos en que no habrá compatibilidad, la verdad es que tiene compatibilidad desde hace años (incluso IE8 dispone de ello), con casi un 95% de soporte global.

querySelector()

En este caso esta función actúa de forma muy similar a un getElementById(), ya que podemos seleccionar tener varios elementos con una ID pero solo selecciona el primero.
Al ser usado como instancia de document hacemos una búsqueda sobre cualquier elemento de la página, pero también puede ser usado como instancia de un elemento del DOM, por ejemplo document.body o cualquier elemento seleccionado con getElementById() o getElementsByTagName().


	
			<div id="prueba">
		
				<span id="id5" class="clase" title="Azul"></span>
				<span id="id4" class="clase" title="Verde"></span>
				<span id="id3" class="clase" title="Naranja"></span>
				<span id="id2" class="clase" title="Lila"></span>
				<span id="id1" class="clase" title="Rojo"></span>
		
			</div>


	
			document.getElementById('id1').title // Rojo
			
			document.querySelector('#prueba .clase').title // Azul
			
			document.querySelector('#prueba #id3.clase').title // Naranja
			
			document.querySelector('#prueba .clase + .clase').title // Verde
			
			document.querySelector('#prueba .clase[title^=L]').title // Lila

Si tenéis alguna duda sobre los selectores usados podéis ver más en este artículo.

querySelectorAll()

Esta función es similar a un getElementsByTagName, devuelve un conjunto de elementos.strong>
Tiene la ventaja, el querySelectorAll() que nos permite conseguir todos los elementos de una o varias consultas, simplemente separando con comas, como hacemos en CSS.


	
			<div id="prueba">
		
				<span id="id5" class="clase" title="Azul"></span>
				<span id="id4" class="clase" title="Verde"></span>
				<span id="id3" class="clase" title="Naranja"></span>
				<span id="id2" class="clase" title="Lila"></span>
				<span id="id1" class="clase" title="Rojo"></span>
		
			</div>


	
			// Los 5 <span>
			document.querySelectorAll('#prueba .clase')
			
			// Todos los <span> de una página
			document.querySelectorAll('span')
			
			// Todos los <span> y <img> de una página
			document.querySelectorAll('span, img')
			
			// Todos los <span> hijos de <div>
			document.querySelectorAll('div > span')

Esta función nos devolverá un Array con los elementos y ya podremos manipular el DOM a nuestro gusto.

Resumen

La gran ventaja que tiene este par de funciones nativas es la gran velocidad con la que trabajan, muy por encima de cualquier framework y dada su gran compatibilidad es recomendable usarlo preferentemente.

Comentarios