C2 - JavaScript y el DOM
Full Stack amb React
Full Stack amb React
Full Stack amb React
Full Stack amb React
El DOM
-
El Document Object Model
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<script src="js/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<h1>Ejemplo DOM</h1>
</header>
<div>
<h2>Esto es un documento HTML</h2>
<img src="img/html.jpg" alt="Documento HTML">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non consectetur sapiente esse odit dolorem fugiat, iure
omnis dolore obcaecati veniam necessitatibus sit quia praesentium, nesciunt suscipit. Adipisci illum tempore fuga.
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, consequatur? Nostrum repudiandae qui expedita
optio exercitationem sapiente rem, quisquam ipsam, sunt veniam dolorum architecto similique! Iusto quibusdam omnis
tenetur nihil.</p>
</div>
</body>
</html>
Full Stack amb React
Full Stack amb React
Manipulación del DOM
-
Acceder a los nodos
-
document.getElementById(id)
-
<document | nodo>.getElementsByClassName(clase)
-
<document | nodo>.getElementsByTagName(etiqueta)
-
<document | nodo>.querySelector(selectorCSS)
-
<document | nodo>.querySelectorAll(selectorCSS)
-
Full Stack amb React
Full Stack amb React
Manipulación del DOM
-
Acceder por posiciones relativas a un nodo
-
children
-
firstElementChild, lastElementChild
-
previousElementSibling, nextElementSibling
-
parentElement
-
Full Stack amb React
Full Stack amb React
Manipulación del DOM
-
Métodos de los nodos
-
cloneNode([deep=false])
-
remove(), removeChild(nodo)
-
append(...nodos), prepend(...nodos)
-
insertBefore(nuevoNodo, nodoReferencia)
- removeAttribute(nombre)
-
Full Stack amb React
Full Stack amb React
Manipulación del DOM
- Propiedades de los nodos
- textContent
- innerHTML
- classList
- dataset
- id
Full Stack amb React
Full Stack amb React
Manipulación del DOM
-
Crear nodos:
- document.createElement(etiqueta)
Full Stack amb React
Full Stack amb React
Manipulación del DOM
- Eventos
- Tipos de eventos
-
Registrar un manejador de eventos:
- nodo.addEventListener(nombreEvento, callback(evento))
-
Cancelar la operación por defecto:
- evento.preventDefault()
-
Quién ha emitido el evento:
- evento.target
Desenvolupador Web Full Stack amb React - C2-JavaScript y el DOM
By mariogl
Desenvolupador Web Full Stack amb React - C2-JavaScript y el DOM
Diapositivas para el curso Desenvolupador Web Full Stack amb React, del 2 de febrero al 27 de abril de 2021 en Barcelona. Módulo C2 - JavaScript y el DOM
- 291