document.getElementById() en JavaScript
Publicado el 22 Feb 2026
📘 Manual: document.getElementById() en JavaScript
🧠 ¿Qué es?
document.getElementById() es un método del DOM que permite seleccionar un elemento HTML usando su atributo id.
Es una de las formas más rápidas y sencillas de acceder a elementos en una página web.
🧩 Sintaxis
document.getElementById("id_del_elemento");
- Debes pasar el id exacto del elemento.
- Devuelve el elemento HTML.
- Si no existe, devuelve
null.
🧱 Ejemplo básico
HTML
<h1 id="titulo">Hola mundo</h1>
<button onclick="cambiarTexto()">Cambiar texto</button>
JavaScript
function cambiarTexto() {
document.getElementById("titulo").textContent = "Texto cambiado 😎";
}
👉 Al hacer clic, el texto cambia.
🧩 Guardar el elemento en una variable
Recomendado para mejorar claridad y rendimiento.
let titulo = document.getElementById("titulo");
titulo.textContent = "Nuevo texto";
✏️ Cambiar contenido
Cambiar texto
document.getElementById("titulo").textContent = "Nuevo texto";
Insertar HTML
document.getElementById("titulo").innerHTML = "<em>Hola</em>";
🎨 Modificar estilos
let elemento = document.getElementById("titulo");
elemento.style.color = "red";
elemento.style.backgroundColor = "yellow";
elemento.style.fontSize = "30px";
📥 Leer valores de inputs
HTML
<input id="nombre" placeholder="Escribe tu nombre">
<button onclick="saludar()">Saludar</button>
JavaScript
function saludar() {
let nombre = document.getElementById("nombre").value;
alert("Hola " + nombre);
}
⚠️ Errores comunes
❌ El elemento no tiene id
<h1>Hola</h1>
✔ Debe ser:
<h1 id="titulo">Hola</h1>
❌ Usar # como en CSS
document.getElementById("#titulo"); // ❌ incorrecto
✔ Correcto:
document.getElementById("titulo");
❌ Ejecutar el script antes de que cargue el HTML
Si el script se ejecuta antes de que exista el elemento, obtendrás null.
✔ Soluciones:
Opción 1 — Colocar el script al final del body
<body>
<h1 id="titulo">Hola</h1>
<script src="script.js"></script>
</body>
Opción 2 — Esperar a que cargue el DOM
document.addEventListener("DOMContentLoaded", function() {
let titulo = document.getElementById("titulo");
});
🆚 Comparación con otros métodos
| Método | Selecciona |
|---|---|
getElementById() |
por id |
querySelector() |
selector CSS |
getElementsByClassName() |
por clase |
getElementsByTagName() |
por etiqueta |
🚀 Ejemplo práctico completo
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<h2 id="mensaje">Bienvenido</h2>
<input id="nombre" placeholder="Tu nombre">
<button onclick="mostrarMensaje()">Mostrar</button>
<script>
function mostrarMensaje() {
let nombre = document.getElementById("nombre").value;
document.getElementById("mensaje").textContent =
"Hola " + nombre + " 👋";
}
</script>
</body>
</html>
🧪 Cuándo usar getElementById()
✔ Cuando el elemento tiene un id único ✔ Cuando necesitas rapidez y simplicidad ✔ Cuando accedes frecuentemente al mismo elemento
🏁 Resumen rápido
- Selecciona elementos por id
- Devuelve el elemento o
null - Permite cambiar contenido, estilos y valores
- Es rápido y fácil de usar
let elemento = document.getElementById("miId");