Cómo seleccionar un elemento por ID usando JavaScript

En JavaScript, casi puede seleccionar cualquier elemento del DOM en función de su ID único usando el getElementById() método. Devuelve el primer elemento que coincide con el ID dado, o null si no se encontró ningún elemento coincidente en el documento.

El siguiente ejemplo muestra cómo puede usar el getElementById() para seleccionar un elemento del DOM y cambia su color de fondo a rojo:

// grab element from DOM
const elem = document.getElementById('protip');

// change background color to red
elem.style.backgroundColor = 'red';

El ejemplo anterior actualizará el color de fondo del elemento con id="protip" usando estilos en línea.

El getElementById() proporciona una forma rápida y segura de seleccionar un elemento DOM por su ID. Funciona en todos los navegadores modernos y antiguos, incluido Internet Explorer.

Alternativamente, también puede usar el querySelector() selecciona un elemento HTML por su ID:

const elem = document.querySelector('#protip');

Para seleccionar elementos DOM por cualquier selector CSS arbitrario como clase, nombre de etiqueta o ID, puede usar el método querySelectorAll(). Devuelve todos los elementos DOM que coinciden con el selector CSS dado.

Eche un vistazo al tutorial sobre cómo seleccionar elementos DOM para obtener más información sobre las diferentes formas de obtener elementos DOM en JavaScript.