DOM api

• Web referencia

Seleccionar element del DOM

const button = document.querySelector("#myButton"); // Un element
const buttons = document.querySelectorAll("button"); // Molts elements
const elem1 =document.getElementById("id")
const elem2 =document.getElementsByClassName("className")
const elem3 =document.getElementsByTagName("tagName")

Afegir un event

const button = document.querySelector("#myButton");
button.addEventListener("click", updateName);
function updateName() {
  button.textContent = "Hello Javascript";
}

const buttons = document.querySelectorAll("button");
for (const button of buttons) {
  button.addEventListener("click", updateName);
}
function updateName() {
  button.textContent = "Hello Javascript";
}

Modificació d'elements del DOM

element.textContent
element.innerHTML
input.value
element.setAttribute(attribute, value)
element.getAttribute(attribute)

Exercicis

• HelloName
• One button clicked

Modificar estil

element.style
element.style.backgroundColor = "blue";
element.style.border = "1px solid blue";

Modificar classes

element.classList.add(className)
element.classList.remove(className)
element.classList.toggle(className)
element.classList.contains(className)

Exercicis

• Highlight Welcome
• Highlight welcome as class

Creació i eliminació d'elements

const node = document.createElement(tagName);
parentElement.appendChild(node);
node.remove();

Templates

const template = document.createElement('template');
template.innerHTML = "<ul><li>it1</li><li>it2</li></ul>";
const node = template.content.firstElementChild;
container.appendChild(node);

funció anònima

• S'utilitzen una sola vegada o com a callbacks.
• Són útils quan necessitem passar una funció com a argument d'una altra funció ( event listener , map, filter...).

  const sayHello = function() {
  console.log('Hi!');
  };
  sayHello();

button.addEventListener("click", function() {
  console.log('Hi!');
});

Funció fletxa

const sayHello = () => {
  console.log('Hello!');
};
sayHello();

• Permet una sintaxi concisa.
• Si la funció té un sol retorn, es pot ometre la paraula clau return i els claudàtors {} -

  button.addEventListener("click", () => console.log("HELLO"));

Exercicis

• ItemList
• ItemListWithRemove

Events en JavaScript

• Són accions o successos que ocorren en una pàgina web.
• Causades per:
  • accions de l'usuari.
  • esdeveniments del sistema.
• Es gestionen amb:
  • event listeners : escolten o esperen el succés.
  • callbacks: acció que es duu a terme després de l'event.

element.addEventListener('event', callback);
element.removeEventListener('click', callback);

Principals tipus d'events

• Events de ratolí: click, dblclick, mouseover, mouseout, mousemove, contextmenu.
• Events de teclat: keydown, keyup, keypress.
• Events de formulari: submit, change, focus, blur, input.
• Events de la finestra: load, resize, scroll.
• Events de DOM: DOMContentLoaded, animationend, transitionend, error.

Nota: en un formulari s'ha de validar en un event de submit

Funcions de manipulació de CSS

window.getComputedStyle(element) // Retorna un objecte amb els valors CSS computats d'un element.