#09 - Javascript - le dom et les événements

Le dom

Il représente la structure de la page et offre des méthodes d’accès pour que le JavaScript puisse en modifier le contenu et le style.

• récupération d'éléments: document.getElementById("id"), document.getElementsByClassName("className"), document.getElementsByTagName("tagName");document.querySelector("selector");document.querySelectorAll("selector")
• ajout et modification d'éléments parent.appendChild(element); parent.removeChild(element); parent.insertBefore(elementToInsert, baseElement);

Modification des éléments

• gestion des attributs: element.setAttribute(name, value); element.getAttribute(name); element.removeAttribute(name);
• gestion des classes: element.className; element.classList;
• gestion des champs formulaire element.value; element.selectedIndex; element.options; element.options[element.selectedIndex].value;
• gestion du style ( camelcase ): element.style.backgroundColor
• gestion du contenu: textContent, innerHTML

Les événements

• syntaxe obsolète: onclick="helloworld()" et element.onclick=helloword
• type d'événement: "click", "mouseenter", "mouseleave", "keydown", "keyup", "scroll", "resize", "change", "submit", "DOMContentLoaded"
• gestion des écouteurs d'événements: element.addEventListener("event",function(event){ }); element.removeEventListener("event", myFunction);
• bubbling: illustration

Exercices

• gestion formulaire
• gestion panier , bonus: permettre de créer des nouveaux produits
• pixel art 1
• pixel art 2
• paint-like ( créer un logiciel de dessin )
• créer un plateau de jeu de dame 10x10, noir et blanc
• vaisseau spatial déplacer un vaisseau spatial