Scribd
Cargar
9 vistas11 páginas

Clase 5 - Javascript y DOM

libro aula para pensar libro aula para pensar libro aula para pensar libro aula para pensar libro aula para pensar

Cargado por

pedro.alvez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
9 vistas11 páginas

Clase 5 - Javascript y DOM

libro aula para pensar libro aula para pensar libro aula para pensar libro aula para pensar libro aula para pensar

Cargado por

pedro.alvez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

Clase 5 -

Javascript y DOM
QUÉ ES JAVASCRIPT?

Lenguaje de programación que interpreta el navegador.

Permite crear sitios interactivos.

Se usa para validar formularios, manejar botones, cargar contenido dinámico, crear
juegos, etc.
EL DOM

Es una representación en árbol de todos los elementos HTML.

Cada etiqueta se convierte en un objeto que JS puede leer y modificar.

Podemos leer, modificar, eliminar y crear elementos


ACCEDER A ELEMENTOS DEL DOM

const titulo = document.querySelector("h1");

const input = document.getElementById("nombre");

const botones = document.querySelectorAll("button");


MODIFICAR CONTENIDO

elemento.innerText = "Hola";

elemento.innerHTML = "<strong>Hola</strong>";
MODIFICAR ATRIBUTOS

elem.setAttribute("src", "img.jpg");

elem.getAttribute("src");

elem.removeAttribute("disabled");
CREAR ELEMENTOS

const nuevoDiv = document.createElement("div");

nuevoDiv.textContent = "Hola";
INSERTAR ELEMENTOS

padre.appendChild(nuevoNodo);

padre.append(nodo1, nodo2);
ELIMINAR ELEMENTOS

elemento.remove();

padre.removeChild(hijo);

padre.replaceChild(nuevo, viejo);
MANEJO DE EVENTOS

const boton = document.querySelector("button");

boton.addEventListener("click", () => {

alert("¡Hiciste clic!");

});
TIPOS DE EVENTOS

click, dblclick, mouseover, mouseout

keydown, keyup, keypress

submit, change

También podría gustarte