Seleccionar y manipular elementos del DOM con JavaScript y jQuery

Esta nota reúne las operaciones más comunes para seleccionar elementos HTML, extraer información, modificar contenido y estilos, administrar clases y responder a eventos.

JavaScript y jQuery permiten realizar muchas de las mismas tareas. JavaScript nativo no necesita bibliotecas adicionales, mientras que jQuery requiere que la biblioteca esté incluida en el proyecto.

1. Seleccionar elementos

JavaScript

Método	Qué selecciona
document.getElementById('id')	Un elemento por su ID.
document.querySelector('selector')	El primer elemento que coincide con el selector CSS.
document.querySelectorAll('selector')	Todos los elementos que coinciden; devuelve un NodeList.
document.getElementsByClassName('clase')	Elementos por clase; devuelve una colección HTML viva.
document.getElementsByTagName('input')	Elementos por etiqueta; devuelve una colección HTML viva.

// Por ID
const titulo = document.getElementById('titulo');

// Por clase: primer elemento
const tarjeta = document.querySelector('.tarjeta');

// Por etiqueta, atributo o selector CSS
const correo = document.querySelector('input[name="correo"]');

// Todos los elementos de una clase
const tarjetas = document.querySelectorAll('.tarjeta');

// Recorrer los resultados
tarjetas.forEach(tarjeta => {
    console.log(tarjeta);
});

Los selectores CSS funcionan igual que en una hoja de estilos: #id, .clase, input, [name="correo"], .contenedor .item, etc.

jQuery

Selector	Qué selecciona
$('#id')	Elemento por ID.
$('.clase')	Elementos por clase.
$('p')	Elementos por etiqueta.
$('input[name="correo"]')	Elementos por atributo.
$('.contenedor .item')	Elementos descendientes que coinciden con el selector.

const titulo = $('#titulo');
const tarjeta = $('.tarjeta');
const correo = $('input[name="correo"]');
const parrafos = $('p');

En jQuery, los resultados son objetos jQuery, no elementos DOM directamente. Puedes usar métodos como .text(), .val() o .addClass().

2. Extraer información de los elementos

Obtener texto o HTML

Necesidad	JavaScript	jQuery
Leer texto	elemento.textContent	$(elemento).text()
Leer HTML interno	elemento.innerHTML	$(elemento).html()
Leer el valor de un input	elemento.value	$(elemento).val()
Leer un atributo	elemento.getAttribute('href')	$(elemento).attr('href')
Leer un atributo data-*	elemento.dataset.id	$(elemento).data('id')

// JavaScript
const nombre = document.querySelector('#nombre').value;
const texto = document.querySelector('.descripcion').textContent;
const enlace = document.querySelector('a').getAttribute('href');
const id = document.querySelector('.producto').dataset.id;

// jQuery
const nombreJQ = $('#nombre').val();
const textoJQ = $('.descripcion').text();
const enlaceJQ = $('a').attr('href');
const idJQ = $('.producto').data('id');

Diferencias importantes:

• textContent obtiene el texto de un elemento y sus descendientes.
• innerHTML obtiene el marcado HTML interno, no solamente el texto.
• value se utiliza normalmente para obtener el valor actual de un campo de formulario.
• getAttribute() obtiene el atributo HTML; por ejemplo, el valor escrito en href.
• dataset permite acceder a atributos como data-id, usando dataset.id.

Usa textContent para mostrar texto que no debe interpretarse como HTML. Evita insertar HTML de fuentes no confiables mediante innerHTML.

3. Modificar contenido y valores

Operación	JavaScript	jQuery
Cambiar texto	elemento.textContent = 'Hola'	$(elemento).text('Hola')
Cambiar HTML interno	elemento.innerHTML = '<b>Hola</b>'	$(elemento).html('<b>Hola</b>')
Cambiar valor de input	elemento.value = 'Ana'	$(elemento).val('Ana')
Cambiar un atributo	elemento.setAttribute('title', 'Ayuda')	$(elemento).attr('title', 'Ayuda')
Eliminar un atributo	elemento.removeAttribute('disabled')	$(elemento).removeAttr('disabled')

// JavaScript
document.querySelector('#titulo').textContent = 'Nuevo título';
document.querySelector('#nombre').value = 'Ana';

// jQuery
$('#titulo').text('Nuevo título');
$('#nombre').val('Ana');
$('#enlace').attr('href', 'https://example.com');

En jQuery, llamar a .text(), .html() o .val() sin argumentos obtiene el valor; con un argumento lo modifica.

4. Agregar, quitar y comprobar clases CSS

Esta es una de las operaciones más frecuentes al trabajar con formularios, botones, tarjetas y menús.

Operación	JavaScript	jQuery
Agregar clase	elemento.classList.add('activa')	$(elemento).addClass('activa')
Quitar clase	elemento.classList.remove('activa')	$(elemento).removeClass('activa')
Alternar clase	elemento.classList.toggle('activa')	$(elemento).toggleClass('activa')
Comprobar clase	elemento.classList.contains('activa')	$(elemento).hasClass('activa')

// JavaScript
const tarjeta = document.querySelector('.tarjeta');

tarjeta.classList.add('seleccionada');
tarjeta.classList.remove('oculta');
tarjeta.classList.toggle('activa');

if (tarjeta.classList.contains('activa')) {
    console.log('La tarjeta está activa');
}

// jQuery
const tarjetaJQ = $('.tarjeta');

tarjetaJQ.addClass('seleccionada');
tarjetaJQ.removeClass('oculta');
tarjetaJQ.toggleClass('activa');

if (tarjetaJQ.hasClass('activa')) {
    console.log('La tarjeta está activa');
}

Una clase puede controlar estilos como visibilidad, colores, bordes o estados de selección. Es preferible alternar clases CSS antes que modificar muchos estilos individuales desde JavaScript.

5. Modificar estilos directamente

JavaScript

const elemento = document.querySelector('.tarjeta');

elemento.style.display = 'none';
elemento.style.color = 'red';
elemento.style.backgroundColor = 'lightgray';

// Consultar el estilo calculado por el navegador
const estilos = getComputedStyle(elemento);
console.log(estilos.display);

jQuery

$('.tarjeta').css('display', 'none');
$('.tarjeta').css('color', 'red');

$('.tarjeta').css({
    backgroundColor: 'lightgray',
    padding: '10px'
});

// Consultar un estilo
const color = $('.tarjeta').css('color');

Importante: elemento.style consulta principalmente los estilos en línea. Para conocer el estilo final calculado por el navegador, utiliza getComputedStyle(elemento).

6. Mostrar y ocultar elementos

// JavaScript
const elemento = document.querySelector('.mensaje');

elemento.style.display = 'none';  // Ocultar
elemento.style.display = 'block'; // Mostrar

// jQuery
$('.mensaje').hide();
$('.mensaje').show();
$('.mensaje').toggle();

En JavaScript, la propiedad display que debes restaurar depende del tipo de elemento y de su diseño. Una clase CSS como .oculto { display: none; } suele ser más práctica.

7. Crear, insertar y eliminar elementos

JavaScript

// Crear un elemento
const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Nuevo elemento';

// Insertarlo dentro de un contenedor
document.querySelector('#contenedor').append(nuevoParrafo);

// Insertarlo al principio
document.querySelector('#contenedor').prepend(nuevoParrafo);

// Eliminar un elemento
nuevoParrafo.remove();

jQuery

// Insertar contenido al final
$('#contenedor').append('<p>Nuevo elemento</p>');

// Insertar contenido al principio
$('#contenedor').prepend('<p>Primer elemento</p>');

// Eliminar elementos seleccionados
$('.elemento').remove();

// Vaciar el contenido de un contenedor
$('#contenedor').empty();

Si el texto que insertas proviene de usuarios, utiliza textContent o .text() en vez de concatenarlo dentro de HTML.

8. Recorrer varios elementos

JavaScript

document.querySelectorAll('.producto').forEach(producto => {
    console.log(producto.textContent);
});

También puedes utilizar un for...of:

const productos = document.querySelectorAll('.producto');

for (const producto of productos) {
    producto.classList.add('visible');
}

jQuery

$('.producto').each(function (indice, elemento) {
    console.log(indice, $(elemento).text());
});

Dentro de .each(), elemento es el elemento DOM y $(elemento) lo convierte en un objeto jQuery. También puedes utilizar $(this) para referirte al elemento actual.

9. Buscar elementos relacionados

Necesidad	JavaScript	jQuery
Elemento padre	elemento.parentElement	$(elemento).parent()
Hijos directos	elemento.children	$(elemento).children()
Descendientes por selector	elemento.querySelectorAll('.item')	$(elemento).find('.item')
Elemento anterior	elemento.previousElementSibling	$(elemento).prev()
Elemento siguiente	elemento.nextElementSibling	$(elemento).next()
Comprobar si coincide con selector	elemento.matches('.activo')	$(elemento).is('.activo')
Encontrar un ancestro coincidente	elemento.closest('.contenedor')	$(elemento).closest('.contenedor')

Ejemplo:

const boton = document.querySelector('.eliminar');
const tarjeta = boton.closest('.tarjeta');

tarjeta?.remove();

Este patrón es útil cuando un botón está dentro de una tarjeta y necesitas localizar o eliminar la tarjeta completa.

10. Manejar eventos

JavaScript

const boton = document.querySelector('#guardar');

boton.addEventListener('click', () => {
    console.log('Botón presionado');
});

Eventos comunes:

• click: se presiona un elemento.
• input: cambia el valor de un campo mientras se escribe.
• change: se confirma un cambio en un campo.
• submit: se envía un formulario.
• keydown: se presiona una tecla.
• DOMContentLoaded: el HTML ya fue analizado por el navegador.

Ejemplo con formulario:

document.querySelector('#formulario').addEventListener('submit', event => {
    event.preventDefault();

    const nombre = document.querySelector('#nombre').value;
    console.log(nombre);
});

event.preventDefault() evita el comportamiento predeterminado del evento, como el envío tradicional del formulario.

jQuery

$('#guardar').on('click', function () {
    console.log('Botón presionado');
});

$('#nombre').on('input', function () {
    console.log($(this).val());
});

$('#formulario').on('submit', function (event) {
    event.preventDefault();

    const nombre = $('#nombre').val();
    console.log(nombre);
});

11. Obtener datos de formularios

<form id="formulario">
    <input id="nombre" name="nombre" type="text">
    <input id="correo" name="correo" type="email">
    <button type="submit">Guardar</button>
</form>

JavaScript

const formulario = document.querySelector('#formulario');

formulario.addEventListener('submit', event => {
    event.preventDefault();

    const nombre = document.querySelector('#nombre').value;
    const correo = document.querySelector('#correo').value;

    console.log({ nombre, correo });
});

Para recopilar los campos con name de un formulario:

const formulario = document.querySelector('#formulario');
const datos = new FormData(formulario);

console.log(datos.get('nombre'));
console.log(datos.get('correo'));

Para convertir los campos en un objeto sencillo:

const datosObjeto = Object.fromEntries(new FormData(formulario));
console.log(datosObjeto);

Este último ejemplo funciona bien cuando los nombres de los campos son únicos y no necesitas conservar varios valores con el mismo nombre.

jQuery

const nombre = $('#nombre').val();
const correo = $('#correo').val();

const datos = {
    nombre: nombre,
    correo: correo
};

12. Atributos data-*

Los atributos personalizados permiten asociar información a elementos HTML.

<button class="ver-producto" data-id="25" data-categoria="llantas">
    Ver producto
</button>

JavaScript

const boton = document.querySelector('.ver-producto');

console.log(boton.dataset.id);         // "25"
console.log(boton.dataset.categoria);  // "llantas"

jQuery

const id = $('.ver-producto').data('id');
const categoria = $('.ver-producto').data('categoria');

Los valores de dataset son cadenas de texto. Convierte el dato cuando necesites operar numéricamente:

const id = Number(boton.dataset.id);

Nota: jQuery puede almacenar en caché los valores leídos con .data(). Si modificas el atributo directamente después, .data() no siempre reflejará ese cambio. Para leer el atributo actual, utiliza .attr('data-id').

13. Comprobar si un elemento existe

JavaScript

const elemento = document.querySelector('#mensaje');

if (elemento) {
    elemento.textContent = 'Elemento encontrado';
}

jQuery

if ($('#mensaje').length > 0) {
    $('#mensaje').text('Elemento encontrado');
}

querySelector() devuelve null cuando no encuentra coincidencias. En jQuery, .length indica cuántos elementos coinciden con el selector.

14. Operaciones rápidas de referencia

Quiero...	JavaScript	jQuery
Seleccionar por ID	document.querySelector('#id')	$('#id')
Seleccionar por clase	document.querySelectorAll('.clase')	$('.clase')
Leer texto	el.textContent	$(el).text()
Leer valor	el.value	$(el).val()
Cambiar texto	el.textContent = 'Hola'	$(el).text('Hola')
Agregar clase	el.classList.add('x')	$(el).addClass('x')
Quitar clase	el.classList.remove('x')	$(el).removeClass('x')
Alternar clase	el.classList.toggle('x')	$(el).toggleClass('x')
Comprobar clase	el.classList.contains('x')	$(el).hasClass('x')
Cambiar atributo	el.setAttribute('title', 'Ayuda')	$(el).attr('title', 'Ayuda')
Eliminar elemento	el.remove()	$(el).remove()
Agregar evento	el.addEventListener('click', fn)	$(el).on('click', fn)
Buscar padre coincidente	el.closest('.padre')	$(el).closest('.padre')

En los ejemplos de JavaScript, el representa un elemento DOM. En los de jQuery, $(el) lo envuelve en un objeto jQuery.

15. Diferencias importantes entre JavaScript y jQuery

• JavaScript nativo: no requiere una dependencia externa y suele ser suficiente para proyectos modernos.
• jQuery: ofrece una sintaxis compacta y métodos consistentes para trabajar con colecciones de elementos.
• querySelectorAll() devuelve una colección DOM; .each() recorre los elementos de una colección jQuery.
• En JavaScript, utiliza classList para modificar clases; en jQuery, utiliza .addClass(), .removeClass() y .toggleClass().
• No mezcles ambos estilos sin necesidad. Si un selector devuelve un elemento DOM, puedes usar sus propiedades nativas; si devuelve un objeto jQuery, utiliza sus métodos.

Regla práctica: si el proyecto ya utiliza jQuery, puedes seguir su estilo para mantener la consistencia. Si estás empezando un proyecto moderno sin esa dependencia, JavaScript nativo suele ser la opción más sencilla.

16. Errores frecuentes

1. Seleccionar un elemento que no existe: comprueba que el selector sea correcto y que el código se ejecute después de cargar el HTML.
2. Usar .value sobre un elemento jQuery: $('#nombre').value no funciona; utiliza $('#nombre').val().
3. Usar .val() sobre un elemento DOM: document.querySelector('#nombre').val() no funciona; utiliza .value.
4. Confundir textContent con innerHTML: el primero trabaja con texto; el segundo interpreta o devuelve marcado HTML.
5. Modificar una clase sin comprobar el estado: utiliza toggle()/toggleClass() o comprueba si la clase existe.
6. Suponer que querySelectorAll() devuelve un único elemento: devuelve todos los elementos coincidentes; utiliza querySelector() si solo necesitas el primero.
7. Ejecutar código antes de cargar el HTML: coloca el script al final del body o espera a DOMContentLoaded.

Ejemplo para esperar al DOM:

document.addEventListener('DOMContentLoaded', () => {
    const boton = document.querySelector('#guardar');

    boton?.addEventListener('click', () => {
        console.log('Listo');
    });
});

Referencias oficiales

• MDN: Document.querySelector()
• MDN: Element.classList
• MDN: Manipulación del DOM
• jQuery: Selectors
• jQuery: API