Sommaire

Explorer une page web avec JavaScript

Nous allons maintenant commencer à exploiter JavaScript dans une page web. Nous allons découvrir le DOM (Document Object Model) et les outils utiles pour interroger et/ou modifier les éléments qui s’y trouvent.

La structure du site web qui sert de support est la suivante, à placer dans un répertoire à votre convenance :

  • [scripts]

  • main.js

  • [styles]

  • main.css

  • main.html

Le contenu des fichiers est décrit ci-après, celui-ci pouvant varier selon les besoins. Ils sont disponibles depuis la page Informations générales.

1. Parcourir le DOM en JavaScript

Pour ce chapitre, le code du fichier main.html est :

<!DOCTYPE html> 
<html lang="fr-FR"> 
   <head> 
       <meta charset="utf-8"> 
       <title>Page WEB support</title> 
       <link rel="stylesheet" type="text/css" href="styles/main.css"> 
   </head> 
   <body> 
       <header>Bienvenue sur la page WEB support de cours - 
Chapitre 4</header> 
       <nav> 
           <label>Accueil</label> 
           <label id="pageUne">Bouton un</label> 
           <label name="pageDeux">Bouton ...