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