Búsqueda en JavaScript: getElement*, querySelector*
Aprender a buscar y seleccionar elementos en el Modelo de Objetos del Documento (DOM) es fundamental para los desarrolladores de JavaScript que desean hacer sitios web interactivos. Esta guía cubre tanto los métodos DOM heredados como los selectores de consulta modernos, e incluye ejemplos simples que puedes probar.
Acceso eficiente a elementos: getElementById
El método getElementById es una forma rápida y confiable de acceder a un elemento específico por su ID único. Dado que el navegador puede optimizar las búsquedas por ID, este método suele ser más rápido que los métodos de selectores CSS. En el ejemplo a continuación, el texto inicial "Texto predeterminado" se reemplaza inmediatamente por el código de JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<div id="main-content">Default text</div>
<script>
const element = document.getElementById('main-content');
element.innerHTML = "Modified text!"
</script>
</body>
</html>Result
Acceso a múltiples elementos: getElementsByClassName y getElementsByTagName
INFO
Cuando seleccionas elementos por su nombre de clase o nombre de etiqueta, recibirás un HTMLCollection. Esta es una colección en vivo que se actualiza automáticamente cuando cambia el DOM, y se comporta como un array para acceder a los elementos por índice y leer la propiedad length. Para iterar sobre ella, primero debes convertirla en un array con el método Array.from.
Ejemplo usando getElementsByClassName
Accede a múltiples elementos con la misma clase usando getElementsByClassName. En este ejemplo tenemos dos elementos div con el mismo nombre de clase. Los modificamos ambos seleccionando esos elementos por su nombre de clase.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<div class="info">First Info</div>
<div class="info">Second Info</div>
<script>
const infoElements = document.getElementsByClassName('info');
Array.from(infoElements).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Ejemplo usando getElementsByTagName
Recupera elementos por su nombre de etiqueta con getElementsByTagName. Es completamente similar al anterior, pero esta vez seleccionamos por el nombre de etiqueta, no por el nombre de clase.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName Example</title>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<script>
const paragraphs = document.getElementsByTagName('p');
Array.from(paragraphs).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Búsquedas flexibles con querySelector y querySelectorAll
Selección con querySelector
Usa querySelector para encontrar el primer elemento que coincida con un selector CSS. En este ejemplo, seleccionamos el primer elemento con la clase text que es un hijo directo del elemento con el id main.
<!DOCTYPE html>
<html>
<head>
<title>QuerySelector Example</title>
</head>
<body>
<div id="main"><span class="text">This will be replaced</span></div>
<div id="other"><span class="text">This one doesn't change</span></div>
<script>
const spanInsideDiv = document.querySelector('#main > .text');
spanInsideDiv.innerHTML = "MODIFIED!";
</script>
</body>
</html>Result
Recuperación de múltiples elementos con querySelectorAll
querySelectorAll te permite seleccionar todos los elementos que coincidan con un selector CSS. Ten en cuenta que, a diferencia de getElementsBy*, que devuelve un HTMLCollection en vivo, querySelectorAll devuelve un NodeList estático que captura una instantánea de los elementos en el momento de la selección y no se actualiza automáticamente cuando cambia el DOM.
<!DOCTYPE html>
<html>
<head>
<title>QuerySelectorAll Example</title>
</head>
<body>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
<script>
const items = document.querySelectorAll('.item');
items.forEach(item => item.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Conclusión
Las técnicas descritas en esta guía proporcionan a los desarrolladores de JavaScript herramientas poderosas para acceder y manipular el DOM de manera eficiente. Al incorporar estos métodos, los desarrolladores pueden mejorar significativamente la interactividad y la capacidad de respuesta de sus aplicaciones web. Estos ejemplos están listos para probarse en un archivo HTML, ofreciendo experiencia práctica con cada método discutido.
Práctica
¿Cuáles de las siguientes afirmaciones son correctas sobre los métodos querySelector y getElementById de JavaScript?