Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
1 result
Blame Permalink
Forked from an inaccessible project.
A-les-bases.md 4.32 KiB

TP3 - API DOM

A. Les bases de l'API DOM

Sommaire

Ce TP va permettre de mettre en oeuvre les principales méthodes de sélection et de modification d'éléments de l'arbre DOM.

A.1. Configuration du projet

Ce repo contient une solution commentée du précédent TP. Il servira de base au T3 :

  1. Clonez le projet 
    mkdir -p ~/ws-js/tp3
git clone https://gitlab.univ-lille.fr/js/tp3.git ~/ws-js/tp3
  2. Lancez VSCodium : 
    codium ~/ws-js/tp3
  3. Ouvrez un terminal intégré dans VSCodium à l'aide du raccourci CTRL+J et tapez : 
    npm install
  4. Une fois tout installé, vous pouvez relancer la compilation à l'aide de la commande npm run watch et lancer le serveur http avec npx serve -l 8000. Vérifiez ensuite que la page s'affiche correctement dans le navigateur :

A.2. Sélectionner des éléments

A.2.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 permet de retourner une référence vers un élément de la page (une balise) à partir d'un sélecteur CSS. Par exemple :

document.querySelector('#appContainer');

retourne la balise d'id html 'appContainer' :

<main id="appContainer">

Dans le fichier main.js, utilisez la fonction console.log() et la méthode querySelector pour afficher la balise qui a comme classe "pageTitle" comme ceci :

console.log( document.querySelector('.pageTitle') );

Sur le même modèle, 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 lien vers le site Unsplash dans les crédits
  4. le titre de la première pizza (<h4>Regina</h4>)

A.2.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" et "Ajouter une pizza")
  2. la liste des prix de toutes les pizzas de la page

A.3. Modifier des éléments

A.3.1. innerHTML

La propriété innerHTML permet à la fois de lire et de modifier le contenu d'un Element HTML (le contenu HTML compris entre les balises ouvrantes et fermantes)

  1. Affichez dans la console le titre de la deuxième pizza ("Napolitaine")
  2. Remplacez dans la page le titre de la deuxième pizza par "Savoyarde"
  3. Ajoutez au titre de la page le code HTML suivant : 
    <small class="label label-success">les pizzas c'est la vie</small>

A.3.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.freepik.com/")
  2. Ajoutez la classe CSS "active" au <li> qui contient le lien "La carte" dans le menu

É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 : B. Les événements.