Comandos básicos de JavaScript
Selección de Elementos
Método |
Descripción |
document.getElementById('id') |
Selecciona un elemento por ID |
document.querySelector('selector') |
Selecciona el primer elemento que coincida |
document.querySelectorAll('selector') |
Selecciona todos los elementos que coincidan (NodeList) |
Manipulación del DOM
Método |
Descripción |
element.textContent = 'Hola' |
Cambia solo el texto |
element.innerHTML = '<b>Hola</b>' |
Inserta HTML |
element.setAttribute('attr', 'valor') |
Cambia o agrega un atributo |
element.classList.add('clase') |
Añade una clase CSS |
element.classList.remove('clase') |
Elimina una clase CSS |
element.classList.toggle('clase') |
Añade o quita una clase CSS |
element.style.color = 'red' |
Cambia un estilo directamente |
document.createElement('div') |
Crea un nuevo elemento |
parent.appendChild(child) |
Agrega un hijo al final |
parent.insertBefore(nuevo, ref) |
Inserta antes de un elemento referencia |
Eventos
Método |
Descripción |
element.addEventListener('click', fn) |
Agrega un listener de evento |
element.removeEventListener('click', fn) |
Quita el listener |
Bucles
Sintaxis |
Descripción |
elements.forEach(el => {}) |
Itera un NodeList o array |
for (let el of elements) {} |
Otra forma de iterar |
Timers
Método |
Descripción |
setTimeout(fn, 1000) |
Ejecuta una vez después de 1 segundo |
setInterval(fn, 1000) |
Ejecuta cada segundo |
clearTimeout(id) |
Cancela timeout |
clearInterval(id) |
Cancela intervalo |
Condicionales
Sintaxis |
Descripción |
if (cond) {} / else {} |
Estructura condicional básica |
switch (val) { case x: break; } |
Estructura condicional múltiple |
Funciones
Definición
Sintaxis |
Descripción |
function saludar() {} |
Declaración clásica |
const saludar = function() {} |
Expresión de función |
const saludar = () => {} |
Función flecha |
const doble = x => x * 2; |
Arrow con retorno implícito |
function sumar(a, b) { return a + b; } |
Parámetros y retorno |
Invocación
saludar(); // Llama sin parámetros
sumar(2, 3); // Llama con argumentos
Funciones como callbacks
[1, 2, 3].forEach(function(num) {
console.log(num);
});
// Con arrow function
[1, 2, 3].forEach(num => console.log(num));
Función anidada
function exterior() {
function interior() {
console.log('Dentro');
}
interior();
}
exterior();
Método |
Descripción |
form.addEventListener('submit', e => e.preventDefault()) |
Prevenir envío por defecto |
input.value |
Obtener o asignar valor de un input |
Almacenamiento Local
Método |
Descripción |
localStorage.setItem('clave', 'valor') |
Guardar en almacenamiento local |
localStorage.getItem('clave') |
Leer del almacenamiento |
localStorage.removeItem('clave') |
Eliminar clave |
Fetch API
Método |
Descripción |
fetch(url).then(r => r.json()) |
Solicitud GET básica |
fetch(url, { method: 'POST', body: data }) |
Envío de datos con POST |
⚠️ Todos los métodos funcionan en navegadores modernos sin necesidad de librerías externas.
Ejemplo