12. Cómo conectar JavaScript con HTML

¿Que es el DOM (Document Object Model)?

El DOM es una representación del documento HTML como un grupo de nodos y objetos. Determinando así la forma en la cual se puede acceder y modificar la estructura, contenido y estilo de un documento HTML.

En palabras mas sencillas el DOM le dice a un programa como JavaScript que nodo o parte del HTML esta leyendo (como puede ser un párrafo o un titulo o una sección, etc.) y es el mismo DOM el que modela como un objeto (con sus propiedades y métodos) esa parte del documento. Con JS se accede a esas propiedades y se invoca esos métodos para modificar, eliminar, crear, etc. elementos en una pagina web.

Para ejecutar código de JavaScript en nuestro HTML usaremos la etiqueta script.

<script>
		console.log("Hello, world");
</script>

• <script> Se utiliza para insertar o hacer referencia a un script ejecutable.
• src: Este atributo especifica la ruta del script externos.

Se puede utilizar para agregar scripts embebidos o separar tu código JavaScript y mantener un orden.

<script src="./main.js"></script>

Los script son interpretados y ejecutados inmediatamente antes de que el navegador procese la página, mientras no contengan el atributo async o defer.

Mas información: script

Leyendo HTML desde JavaScript

La forma profesional de leer Código HTML desde JavaScript es crear variables que representen a los selectores de cada uno de los elementos presentes en HTML a los cuales de desea acceder.

Una forma de acceder al código HTML desde JS es por medio de la función document.querySelector(), en el cual dentro de un string le indicamos cual es el selector al cual queremos acceder desde JS.

Para poder manipular un objeto del DOM, tenemos que “escucharlo”, o poder leerlo de alguna
manera:

• Entonces usamos document, que representa el DOM.
• Existen varios métodos para obtener acceder a un elemento(nodo) del árbol:
  • getElementById(’id’): Obtenemos por id.
  • querySelectorAll(’’): Obtenemos todos los elementos del tipo que hayamos seleccionado; clases, etiquetas.
• En este caso usamos el método querySelector(’’elemento’’), para decir en que nodo del árbol vamos a trabajar
• Cada uno de estos elementos tiene sus propias propiedades y métodos, con el fin de manipularlas
• Cada elemento que obtengamos tendrá muchas propiedades que podamos usar o manipular

Para leer y manipular el DOM usamos document

querySelector() - Obtener primer elemento usando selectores CSS.

const paragraph = document.querySelector('.paragraph');

querySelectorAll() - Lista todos lo elementos.

document.querySelectorAll('h3');

getElementById() - Elemento por id.

document.getElementById('dateOfBirthday');

getElementsByClassName() - Lista de elementos por clase.

document.getElementsByclassName('red box');

Escribiendo HTML desde JavaScript

Existen muchos atributos o propiedades, las cuales nos ayudan bastante para modificar o leer ese atributo o propiedad tenemos a:

• Element.innerHTML() - La propiedad Element.innerHTML devuelve o establece la sintaxis HTML describiendo los descendientes del elemento.

  const content = element.innerHTML;
  
  element.innerHTML = htmlString;
  

• Element.innerText() - La propiedad innerText representa el contenido de texto representado de un nodo y sus descendientes. Se diferencia de textContent ya que innerText es consciente de la apariencia renderizada del texto.

• Element.getAttribute() - Devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto null como "".

  var atributo = element.getAttribute(nombreAtributo);
  

• Element.setAttribute() - Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado.

  Element.setAttribute(name, value);
  

• Element.classList

  • classList.add() - Añade a las clases indicadas.

  // <h1> Soy un título </h1>
  h1.classList.add("red");
  // <h1 class="red"> Soy un título </h1>
  

  • classList.remove() - Elimina las clases indicadas

  // <h1 class="red"> Soy un título </h1>
  h1.classList.remove("red");
  // <h1> Soy un título </h1>
  

  • classList.toggle() - Alterna el valor de la clase si hay un argumento presente si la clase existe la elimina y devuelve false, si no, la añade y devuelve true.

  // <h1 class="red> Hola </h1>
  let toggle = h1.classList.toggle("red");
  console.log(toggle);
  // false
  // <h1> Hola </h1>
  

  • classList.contains() - Comprueba si la clase indicada existe.

  // <h1 class="red"> Hola </h1>
  console.log(h1.classList.contains("red"));
  // true
  

  • classList.replace() - Reemplaza una clase existente por una nueva.

  // <h1 class="red"> Hola </h1>
  h1.classList.replace("red", "blue");
  // <h1 class="blue"> Hola </h1>
  

• Element.createElement() - En un documento HTML, el método Document.createElement() crea un elemento HTML especificado por su tagName.

  var element = document.createElement(tagName);
  

append(), prepend() y appendChild()

• append() - Nos permite adjuntar un objeto nodo o un DOMString después del último elemento hijo del elemento padre.
• prepend() - Colocara el nodo o el DOMstring delante de cualquier elemento hijo dentro del elemento padre.
• appendChild() - Es parecido al método .append pero en este caso solo admitirá nodos, por lo que NO podremos usar DOMString.

Eventos en JavaScript: interactuando con usuarios

Un evento es una acción del usuario ante la cual puede realizarse algún proceso(por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).

• Escuchando un input - Podemos utilizar el atributo onchange en el input y pasarle una función que haga referencia a la función definida en tu script.

  HTML

  <input id="numero" onchange="showNumber()"/>
  

  JavaScript

  const numero = document.querySelector("\#numero");
  function showNumber() {
  		console.log(numero)
  }
  

  Esto hará que cada vez que hagamos un cambio en el input y le quitemos el focus mostrará en consola lo que se escribió.

• Escuchando un botón - Para escuchar un botón podemos hacer uso de el atributo onclick y pasarle una función como vimos anteriormente.

  HTML

  <button id="btn" onclick="btnOnclick()">Haga click</button>
  

  JavaScript

  const btn = document.getElementById("btn");
  function btnOnclick() {
  		console.log("Hizo click");
  }
  

  Entonces cada vez que haga click en el botón se mostrará ese texto en consola.

• addEventListener() - registra un evento a un objeto en específico. El Objeto especifico puede ser un simple elemento en un archivo, el mismo documento, una ventana o un  XMLHttpRequest.

  target.addEventListener(tipo, listener[, useCapture]);
  

• Escuchar evento desde HTML - Para lograr esto podemos definir una propiedad al elemento que normalmente es el nombre del evento con el prefijo “on” y como valor le pasamos la función que ejecutará.

  <button id="btnCalculo" onclick="console.log("Hice click!")">Calcular</button>
  

  También podríamos definir la función en un archivo script.

  HTML

  <button id="btnCalculo" onclick="btnOnclick()")>Calcular</button>
  <script src="script.js"></script>
  

  JavaScript

  function btnOnclick() {
  	console.log("Hice click");
  }
  

• Escuchar un evento desde JavaScript - Escuchar un elemento desde JavaScript evita que nuestro html se vea desordenado y además es la forma que vas a encontrar mayormente en cualquier proyecto.

  HTML

  <button id="btn">Enviar</button>
  

  JavaScript

  	const btn = document.getElementById("btn");
  	
  	btn.addEventListener("click", btnClick);
  	function btnClick() {
  	    console.log("Hice click!");
  	}
  

• Escuchando evento desde un formulario - Cuando utilizamos un botón en un formulario por defecto este lo define de tipo submit y esto ocasiona que al realizar la acción la página se recarge. Para evitar esto y poder ver los cambios al escuchar el evento de click utilizaremos event.preventDefault().

  HTML

  <form id="form">
  		<button>Enviar</button>
  </form>
  

  JavaScript

  const form = document.getElementById("form");
  		
  form.addEventListener("submit", btnClick);
  function btnClick(event) {
  		event.preventDefault();
  		console.log("Hice click!");
  }
  

  Otra forma de solucionar esto es especificarle explícitamente que nuestro botón no es un submit.

  HTML

  <form id="form">
  		<button id="btn" type="button">Calcular</button>
  </form>
  

Tipos de Eventos

Los atributos que podemos usar en el HTML para asociar manejadores de eventos tienen siempre el prefijo "on" seguido del nombre del evento. Por ejemplo, "onclick".