Le DOM
C'est quoi?
Le DOM est une interface de programmation qui nous permet de manipuler le code HTML d’une page de façon dynamique en utilisant le langage JavaScript.
Document Object Model
Le DOM HTML est un standard de programmation reconnu par tous les navigateurs.
Il considère les éléments HTML comme des objets.
Ainsi, nos éléments HTML vont posséder des propriétés et des méthodes.
La structure du DOM
Dans la structure du DOM HTML, tout dans une page HTML va être considéré comme un nœud, ou node en anglais:
Le document HTML lui même, les éléments HTML, les attributs HTML, le texte à l’intérieur des éléments, etc.
Plusieurs types de nœuds correspondent aux différents objets HTML :
ELEMENT_NODE (pour les éléments HTML),
TEXT_NODE (pour le texte).
Le DOM est construit comme une hiérarchie de nœuds.
On prend souvent l’image d’un arbre pour se représenter une page HTML du point de vue du DOM.
Accéder à un élément HTML
Nous allons pouvoir manipuler des éléments HTML en nous servant du DOM et de ses méthodes et propriétés.
Pour accéder aux éléments de notre page HTML, nous allons toujours devoir passer par l’objet Document.
Document représente toute la page Web. A partir de cet objet, on va avoir accéder à tout en tas de méthodes qui vont nous permettre d'interagir avec la page.
Les méthodes
querySelector()
et
querySelectorAll()
Ces méthodes vont nous permettre d’accéder à des éléments HTML correspondant à un certain sélecteur CSS, que ce soit un id, une class, un type d’élément, un attribut ou autre.
Ces deux méthodes vont donc prendre un sélecteur CSS en argument. On peut évidemment préciser une suite de sélecteurs pour cibler un élément précis.
querySelector() va renvoyer des informations relatives au premier élément trouvé correspondant au sélecteur CSS sélectionné.
EXEMPLE
var title = document.querySelector("#titre");
title.style.fontSize = "50px";querySelectorAll() va renvoyer des informations sur tous les éléments correspondants.
EXEMPLE
var p = document.querySelectorAll(".para");
for (var i = 0; i < p.length; i++) {
(p[i].style.backgroundColor = "yellow"),
(p[i].style.textAlign = "center");
}//Créer une class "para" pour
//le paragraphe puis copier coller
//ce dernierEXEMPLE
for (var i = 0; i < p.length; i++)Une boucle for contient trois « phases » à l’intérieur du couple de parenthèses :
-une phase d’initialisation
-une phase de test
-une phase d’incrémentation
Chaque phase est séparée des autres par un point-virgule.
Exo
//Dans le HTML, créer un liste ordonnée:
//salade, tomates, oignons
//Ensuite, dans le JS, mettre:
//"salade" en bold,
//"tomates" en Arial et le changer en "champignons"
//"oignons" vers la droite de 150pxExo
var courses = document.querySelectorAll('li');
for (var i = 0; i < courses.length; i++) {
courses[0].style.fontWeight = 'bold';
(courses[1].style.fontFamily = 'Arial'),
(courses[1].textContent = 'champigons');
courses[2].style.marginLeft = '150px';
}
Utiliser les class CSS
.change {
color: aqua;
font-size: 60px;
border: 5px solid black;
width: 200px;
}EXEMPLE
//Créer un h3 avec la class small
//dans le html.
//Créer la class change dans le css.var subTitle = document.querySelector('.small');
subTitle.classList.add('change');
subTitle.classList.remove('change');
EXEMPLE
Exo
// Créer un h2 avec la class "foBouger"
// Le h2 est bleu de base.
// Quand on arrive sur notre page,
// le h2 clignote indéfiniment
// Il passe du rouge au jaune, en allant vers
// la droite de 400px
// sur un temps de 3 secondes.
// Créer cette animation avec le css
// Donner la class correspondante dans le JS.
.foBouger {
color: blue;
}
.onBouge {
animation: ghost 3s infinite;
}
Exo
@keyframes ghost {
from {color: red;}
50% {color: yellow;
transform: translateX(400px);
}
to {color: red;}
}Exo
var bouger = document.querySelector(".foBouger");
bouger.classList.add("onBouge");Exo
C'est très cool mais en terme d'interaction c'est pas fou...
JS - Le DOM
By Jonathan Blanc
