B-les-bases.md

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()
  • B.1.2. querySelectorAll()
• B.2. Modifier des éléments
  • B.2.1. innerHTML
  • B.2.2. getAttribute/setAttribute

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 :

1. La balise <img> qui contient le logo de la page (les 2 parts de pizza)
2. Le lien du menu "Ajouter une pizza"
3. 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 :

1. la liste des liens du menu de navigation ("La carte", "À propos" et "Ajouter une pizza")
2. 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)

1. Affichez dans la console le titre de la deuxième pizza (la chaîne de caractères "Napolitaine")

2. 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.

1. Affichez dans la console l'url du 2e lien contenu dans le footer ("https://www.iut-a.univ-lille.fr/")

2. 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.