L'OBJET WINDOW
L'objet window donne accès à tout ce qui se trouve dans notre page.
Avec console.log(window), la liste de tout ce que l'on code s'affiche, ainsi que tout ce qu'il y a par défaut.
L'OBJET LOCATION
L'objet location est une propriété de l'objet global window.
window.location="href..." renverra vers la page souaitée.
Voir les détails en tapant console.log(window.location).
DOM
Les éléments du DOM sont des objets JavaScript et il existe différentes façons de retrouver des éléments dans notre page.
Tout commence avec le document. Cet objet, est le point de départ du DOM. Il représente votre page entière.
C'est donc lui qui contient les fonctions dont vous aurez besoin pour retrouver les éléments que vous cherchez.
Astuce pour voir les propriétés d'un élément quand celle ci ne sont pas affichées:
console.log(cible.parentElement.children); .
ACCEDER AUX ÉLÉMENTS DU DOM
HIÉRARCHIE:
- console.log(document) donne accès à tous les éléments du DOM.
- console.log(document.title) donne accès au contenu de la balise title, qu'il est possible de modifier ainsi:
document.title = "New title".
- console.log(document.body.children) donne accès aux enfants da la balise body sous forme d'un tableau, ou plutôt d'une "collection HTML".
- Si l'on veut accéder à l'un d'entre eux en particulier, il suffit de le préciser entre crochet console.log(document.body.children[0])
- Il est également possible de continuer afin d'accéder à l'élément souhaité console.log(document.body.children[0].children.children)...
- Accéder au premier élément: firstElementChild console.log(document.body.firstElementChild).
- Accéder au dernier élément: lastElementChild console.log(document.body.lastElementChild).
- Accéder à un élément frère: nextElementSibling console.log(document.body.children[0].nextElementSibling).
- Accéder à un élément parent: parentElement console.log(document.body.children[0].parentElement).
RÉCUPÉRER ET MODIFIER UN ÉLÉMENT:
- Modifier du texte avec textContent: document.body.children[0].textContent = "JAVA" .
MODIFIER LE STYLE:
- Modifier le style avec les objets style et (par exemple) backgroundColor (en camelcase): document.body.children[0].style.backgroundColor = "blue" .
ACCÉDER/MODIFIER UNE CLASS:
- Accéder aux class avec classList: console.log(document.body.children[0].classList) .
- Ajouter une class avec classList.add: document.body.children[0].classList.add("newClass") .
- Supprimer une class avec classList.remove: document.body.children[0].classList.remove("nameClass") .
BASCULER:
- Basuler, enlever un élément s'il y est ou l'ajouter s'il n'y est pas avec toogle: document.body.children[0].classList.toogle("nameClass") .
ACCÉDER/MODIFIER LES ATTRIBUTS(src, rel, href...):
- Accéder à un attribut avec getAttribute pour récupérer son contenu: console.log(document.body.children[0].getAttribute("src")) .
- Modifier un attribut avec setAttribute: document.body.children[0].setAttribute("src", "./cheminImage.png") .
SÉLÉCTIONNER UN ÉLÉMENT:
- Accéder à un élément en ciblant un id avec getElementById(ici element sans s): console.log(document.getElementById("nameId")) .
- Modifier le contenu : document.getElementById("nameId").textContent = "new contenu" .
Dans les deux exemples suivant, elements s'ecrit avec un s. Le résultat sera retourné sous forme de "tableau"(HTML collection). On peut donc séléctionner un élément en particulier en le ciblant entre crochet
- Accéder à un élément en ciblant une balise HTML avec getElementsByTagName: console.log(document.getElementByTagName("div ou autre")) .
- Accéder à un élément en ciblant une class avec getElementsByClassName: console.log(document.getElementsByClassName("className")) .
- Il est bien sûr possible de stocker le résultat dans une variable:
const maVar = document.getElementsByClassName("className")[0] .
- Séléctionner un élément avec querySelector ou querySelectorAll:
- querySelector renvoit le premier élément qu'il trouve: console.log(document.querySelector(".className ou div ou..."))
- querySelectorAll envoit tous les résultats, sous forme de "tableau" (NodeList): console.log(document.querySelectorAll(".className ou div ou...."))
MODIFIER L'ORDRE DES ÉLÉMENTS:
Imaginons 3 div directement dans le body avec chacune un background différent et donc une class différente ayant le nom de leurs couleur.
- création de trois variable ciblant chacune un élément:
- const rouge = document.querySelector(".rouge");
- const vert = document.querySelector(".vert");
- const bleu = document.querySelector(".bleu");
- document.body.insertBefore(bleu, vert);
-insertBefore va placer la div avec la class bleu avant la div avec la class verte.
-rouge.appendChild(bleu);
- On cible le contenu de la cont rouge(donc la div qui contient la class rouge), puis on lui ajoute le contenu de la const bleu(donc la div qui a la class bleu).
- La div bleu se trouve maintenant dans la div rouge.
- document.body.replaceChild(bleu, rouge);
-replaceChild va remplacer la div avec la class rouge par la div avec la class bleu.
- bleu.parentElement.removeChild(bleu);
- RemoveChild va supprimer l'ENFANT. Si l'on cible la const bleu comme point de départ, il faut donc remonter à l'élément parent(parentElement), puis supprimer l'enfant(bleu).
- rouge.remove();
- Remove va supprimer la div rouge mais cela ne fonctionne pas sur tout les navigateurs.
CRÉER DES ÉLÉMENTS:
Quelques exemples:
const jaune = document.createElement("div");
jaune.classList.add("jaune");
jaune.textContent = "jaune";
document.body.appendChild(jaune);
function planifierTache(heure, tache){
const newTache = document.createElement("li");
newTache.innerHTML = `< h3>${heure}< / h3>< p>${tache}< / p>`;
document.querySelector("ul").appendChild(newTache);
}
planifierTache("3h00", "dormir");
innerHTML sert à placer du code HTML, ici, à l'interieur du li.
LES ÉVÈNEMENTS
Chaque évènement contient plusieurs types
Voir
EXECUTER DU CODE EN RÉACTION A UN ÉVÈNEMENT
Avec Event Handler(gestionnaire d'évènement)
Se sont des propriétés qui commence toujours par on
Liste de tout les gestionnaires d'évènements dans la liste à gauche, dans
propriétés ici
A noter que le code affécté doit être placé dans une fonction:
window.
onload = function(){
const rouge = document.querySelector(".rouge");
const vert = document.querySelector(".vert");
const bleu = document.querySelector(".bleu");
//
onclick permet d'effectuer des actions après un clic
//Si l'on crée plusieurs actions, comme plus bas, ce sera la dernière qui sera executée car onclick ne permet pas plusieurs actions.
//Si l'on met un argument, il fera référence aux paramètres de mouseEvent
rouge.onclick =
function(){
rouge.textContent = "Rouge cliqué !";
}
rouge.onclick =
function(){
bleu.textContent = "Rouge cliqué 2 !";
}
}
Avec Event Listener(écouteur d'évènement)
Une autre manière d'executer du code lors d'un évènement est d'utiliser la fonction addEventListener qui prendra deux paramètre: l'évènement et la function à executer quand se produit cet évènement.
Avantages:
- Permet d'ajouter plusieurs gestionnaires pour un évènement. Utile pour les bibliothèques AJAX, modules JavaScript ou code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions.
- Contrôle plus fin sur la phase d'activation de l'écouteur(capture contre propagation)
- Fonctionne avec tout éléments du DOM, pas que les éléments HTML.
Exemple:
window.onload = function(){
const rougeAdd = document.querySelector(".rouge_add_listener");
const vertAdd = document.querySelector(".vert_add_listener");
const bleuAdd = document.querySelector(".bleu_add_listener");
rougeAdd.addEventListener("click", function(){
rougeAdd.textContent = "Rouge cliqué !";
});
rougeAdd.addEventListener("click", function(){
bleuAdd.textContent = "Rouge cliqué 2 !";
});
}
PROPAGATION DES ÉVÈNEMENTS
S'il on a deux div comme ceci:
window.onload = function(){
const parent = document.querySelector("#parent");
const enfant = document.querySelector("#enfant");
enfant.addEventListener("click", enfantFunction);
parent.addEventListener("click", parentFunction);
function enfantFunction(event){
console.log("clic sur enfant");
}
function parentFunction(event){
console.log("clic sur parent");
}
}
Si l'on clic sur le parent, dans la console, on aura "clic sur parent".
Si l'on clic sur la div enfant, la console affichera "clic sur enfant" puis "clic sur parent".
Il débute des enfants et remonte vers les parents s'ils contiennent eux aussi un addEventListener.
C'est ce que l'on appele le bouillonnement ou event bubbling en anglais.
Cette phase vient après la phase de capture, qui elle, suis le sens inverse.
Si l'on veut executer le code pendant la phase de capture, il suffit d'ajouter true, en troisième paramètre.
PROPRIÉTÉS DE BASE DE L'OBJET EVENT
Voir la liste à gauche dans propriétés
Ici
Quelques exemples(avec une de nos fonction vu plus haut):
function parentFunction(event){
console.log(event.type); //Donne le type, ici: click
console.log(event.target); //Donne l'élément sur qui a débuté l'évènement, ici, la div qui contient l'id="parent" si l'on clic sur le parent et la div qui contient l'id enfant si l'on clic sur l'enfant
console.log(event.currentTarget); //Donne la target du moment où on execute le code. Le point de départ
}
MÉTHODES DE BASE DE L'OBJET EVENT
Voir la liste à gauche dans méthodes
Ici
Quelques exemples:
function enfantFunction(event){
event.stopPropagation(); //Stoppera la propagation. Si l'on clic sur bleu, il n'y aura pas le résultat de la div parent
}
Méthode preventDefault():
const form = document.querySelector("form");
form.addEventListener("submit", envoyerForm);
function envoyerForm(event){
event.preventDefault(); //prevent default empêcher l'action par défaut. Ici, le rechargement de page.
console.log("Formulaire envoyé !");
}