-
Thomas Fritsch authoredThomas Fritsch authored

B. Les bases de l'API DOM
Dans cette partie du TP, nous allons prendre en main les méthodes de base de l'API DOM et notamment celles de sélection et de modification d'éléments de l'arbre DOM.
Sommaire
B.1. Sélectionner des éléments
B.1.1. querySelector()
Comme vu en cours, la principale méthode pour sélectionner un élément de la page HTML est la méthode querySelector()
.
querySelector()
est une méthode de la classe Element
qui retourne une référence vers le premier élément de la page (une balise) qui correspond au sélecteur CSS passé en paramètre. Par exemple :
document.querySelector('.pageContainer');
retourne (si elle existe !) la balise ayant comme classe CSS 'pageContainer'
:
<section class="pageContainer">
Ouvrez les devtools de votre navigateur, et dans la console, tapez le code suivant :
document.querySelector('.pizzaList')
cette instruction vous retourne la balise qui a comme classe "pizzaList"

Sur le même principe, affichez dans la console :
- La balise
<img>
qui contient le logo de la page (les 2 parts de pizza) - Le lien du menu "Ajouter une pizza"
- le titre de la première pizza (
Regina
)

B.1.2. querySelectorAll()
La méthode querySelectorAll()
permet de récupérer non pas un, mais tous les éléments qui correspondent au sélecteur CSS passé en paramètre.
Affichez dans la console :
- la liste des liens du menu de navigation ("La carte", "À propos" et "Ajouter une pizza")
- la liste des
<li>
contenant le prix de toutes les pizzas

B.2. Modifier des éléments
B.2.1. innerHTML
La propriété innerHTML
permet à la fois de lire et de modifier le contenu d'un Element HTML (tout ce qui est compris entre les balises ouvrantes et fermantes)
-
Affichez dans la console le titre de la deuxième pizza (la chaîne de caractères
"Napolitaine"
) -
Ajoutez au logo (grâce à la propriété
innerHTML
) le code HTML suivant :<small>les pizzas c'est la vie</small>
De manière à obtenir :
<a href="#" class="logo"> <img src="images/logo.svg" /> <span>Pizza<em>land</em></span> <small>les pizzas c'est la vie</small> </a>
B.2.2. getAttribute/setAttribute
Les méthodes getAttribute()
et setAttribute()
de la classe Element
permettent de lire, d'ajouter ou de modifier des attributs HTML.
-
Affichez dans la console l'url du 2e lien contenu dans le footer (
"https://www.iut-a.univ-lille.fr/"
) -
Ajoutez la classe CSS
"active"
au premier lien du menu ("La carte")
Étape suivante
Maintenant que l'on est capable de sélectionner / modifier des éléments HTML, nous allons voir dans le prochain exercice comment détecter les événements : C. Les événements.