- Búsqueda por identificador
- Búsqueda por clase
- Búsqueda por etiqueta
- Búsqueda por selector
- Otros métodos útiles
- Lenguaje XPath
Por lo general, en las tareas prácticas de frontend es común necesitar manipular conjuntos de elementos que están profundamente anidados en el árbol DOM. Muchas veces, estos elementos están dispersos por diferentes partes del mismo árbol. Por ejemplo, podríamos querer marcar una lista de archivos para eliminar y luego realizar esa acción. Desde el punto de vista de modificar el árbol DOM, esto implica seleccionar todos los elementos que representan archivos en términos visuales y proceder a eliminarlos.
En estas situaciones, hacer un recorrido manual del árbol sería una tarea extremadamente tediosa. El DOM ofrece varias maneras de abordar este tipo de tarea, las cuales vamos a explorar en esta lección.
Búsqueda por identificador
Esta es la forma más sencilla de búsqueda:
<p id="content">Este es un párrafo</p>
const el = document.getElementById('content');
Según la especificación, el id debe ser único en la página, por lo que el método getElementById() siempre devuelve un solo elemento. Por otro lado, por casualidad puede haber varias etiquetas con el mismo id en el HTML. En tal caso, el navegador devolverá el primer elemento encontrado.
Búsqueda por clase
Si se necesita procesar varios elementos a la vez, la búsqueda por clase es más adecuada:
// Búsqueda en todo el árbol
// Devuelve todos los elementos con esa clase, que pueden ser completamente diferentes
const collection = document.getElementsByClassName('row');
// Este método permite buscar no solo en todo el documento,
// sino también entre los descendientes de cualquier elemento
el.getElementsByClassName('row');
Búsqueda por etiqueta
Si es necesario, también se puede buscar por etiqueta. En la práctica, esto no ocurre con frecuencia, pero es útil conocer este método:
document.getElementsByTagName('span');
// Buscar todos los elementos
document.getElementsByTagName('*');
// Buscar entre los descendientes de el
el.getElementsByTagName('span');
Búsqueda por selector
Esta es la forma más versátil de búsqueda. Recordemos que un selector es una regla que permite describir un conjunto de elementos en el árbol DOM:
<ul id="menu">
<li class="odd"><span>Primero</span> elemento</li>
<li>Segundo</li>
<li class="odd"><span>Tercero</span> elemento</li>
</ul>
// Este código devuelve el primer elemento encontrado según el selector especificado
// Buscamos el elemento con id=menu
const ul = document.querySelector('#menu');
// Todos los spans, anidados en etiquetas con la clase .odd
const spans = ul.querySelectorAll('.odd > span');
Los métodos querySelector() y querySelectorAll() se pueden aplicar tanto a todo el documento como a un elemento específico. Como de costumbre, buscaremos entre todos los descendientes.
Otros métodos útiles
Predicado matches
El predicado el.matches(css) verifica si el cumple con el selector css:
<p class="font-weight">¡Esto es Códica!</p>
const el = document.querySelector('p');
el.matches('.unknown-class'); // false
el.matches('.font-weight'); // true
Método closest
El método el.closest(css) busca el elemento más cercano hacia arriba en la jerarquía que cumple con el selector. El propio elemento también se analiza. Si se encuentra dicho elemento, se devuelve, de lo contrario se devuelve null:
<div class="row" id="one">
</div>
<div class="row" id="two">
<div class="row" id="three">
<span>¿Dónde está el más cercano?</span>
</div>
</div>
const el = document.querySelector('span');
const ancestor = el.closest('.row');
ancestor.id; // 'three'
Lenguaje XPath
Este es un lenguaje de consultas originalmente diseñado para navegar por el DOM en XML. Es compatible con los navegadores.
<html>
<body>
<div>Primera capa
<span>Bloque de texto en la primera capa</span>
</div>
<div>Segunda capa</div>
<div>Tercera capa
<span class="text">primer bloque en la tercera capa</span>
<span class="text">segundo bloque en la tercera capa</span>
<span>tercer bloque en la tercera capa</span>
</div>
<span>cuarta capa</span>
<img />
</body>
</html>
La ruta XPath /html/body/*/span/@class coincidirá con dos elementos del documento original:
<span class="text">primer bloque en la tercera capa</span><span class="text">segundo bloque en la tercera capa</span>.
En la práctica diaria, casi no se utiliza al trabajar con el DOM, lo hemos revisado solo para tener una imagen completa. Sin embargo, al trabajar con documentos XML, XPath es el principal método de navegación por el documento.
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
