Seleccionar elementos del DOM: querySelector y getElementById

Usa querySelector para obtener el primer elemento que coincide con un selector CSS, querySelectorAll para obtener todos y getElementById cuando conoces el id. Los tres devuelven elementos del DOM, la representación en memoria de tu HTML.

Ejemplo de HTML

<h1 id="titulo">Hola</h1>
<ul id="lista">
  <li class="item">Uno</li>
  <li class="item">Dos</li>
</ul>

getElementById

const titulo = document.getElementById('titulo');
titulo.textContent = 'Nuevo título';

Recibe solo el nombre del id, sin #. Es rápido y claro, pero solo sirve para ids.

querySelector

Acepta cualquier selector CSS y devuelve el primer elemento, o null si no hay ninguno:

const titulo = document.querySelector('#titulo');   // por id
const primero = document.querySelector('.item');    // por clase
const enLista = document.querySelector('#lista li'); // descendiente

querySelectorAll

Devuelve una NodeList con todos los elementos que coinciden (vacía si no hay ninguno):

const items = document.querySelectorAll('.item');
console.log(items.length); // 2

items.forEach(item => console.log(item.textContent));

const textos = [...items].map(item => item.textContent);
console.log(textos); // ['Uno', 'Dos']

La NodeList admite forEach, pero no map ni filter. Conviértela con [...items] o Array.from(items) cuando los necesites.

Comparación rápida

querySelector y querySelectorAll son los más versátiles; con ellos puedes dejar de memorizar métodos distintos.

El error más común: null

const boton = document.querySelector('#boton');
boton.addEventListener('click', () => {});
// TypeError: Cannot read properties of null (reading 'addEventListener')

Significa que el selector no encontró nada. Causas habituales:

1. El selector tiene un error: falta # o ., o el nombre está mal escrito.
2. El script se ejecuta antes de que exista el elemento. Coloca el <script> al final del body, o usa el atributo defer.
3. El elemento se crea más tarde con JavaScript.

Puedes protegerte con una comprobación:

const boton = document.querySelector('#boton');
if (boton) {
  boton.addEventListener('click', () => console.log('Clic'));
}

Buscar dentro de un elemento

Los métodos también existen en cada elemento y limitan la búsqueda a su interior:

const lista = document.querySelector('#lista');
const dentro = lista.querySelectorAll('.item');

Después de seleccionar

Con un elemento puedes cambiar su texto (textContent), sus clases (classList.add('activo')), sus atributos (setAttribute) o escuchar eventos (addEventListener). Para insertar texto de usuarios, usa siempre textContent en lugar de innerHTML, para no introducir HTML inseguro.

Última actualización: 18 de octubre de 2026. Los ejemplos se han comprobado en un navegador actual y en Node.js.