Saltar a contenido

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();

Formularios

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

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>For Loop con Función</title>
</head>
<body>
<h2>Lista de nombres:</h2>
<ul id="lista-nombres"></ul>

<script>
    // Función que recorre el array y actualiza el DOM
    function mostrarNombres() {
    const nombres = ['Ana', 'Luis', 'Carlos', 'María'];
    const lista = document.getElementById('lista-nombres');

    for (let i = 0; i < nombres.length; i++) {
        const li = document.createElement('li');
        li.textContent = nombres[i];
        lista.appendChild(li);
    }
    }

    // Llamar la función al cargar la página
    mostrarNombres();
</script>
</body>
</html>
Lista de nombres:
- Ana
- Luis
- Carlos
- María