Explorer les propriétés du DOM en JavaScript

Introduction

Dans ce laboratoire, les participants exploreront les propriétés du Document Object Model (DOM) en JavaScript en créant un document HTML interactif et en utilisant JavaScript pour accéder et manipuler divers attributs du document. Le laboratoire propose une approche pratique pour comprendre les principales propriétés du DOM telles que le titre du document, l'URL, les liens, les images et le contenu du corps.

Par une procédure étape par étape, les apprenants créeront tout d'abord une structure HTML de base, puis utiliseront progressivement JavaScript pour interagir avec différentes propriétés du document. En examinant des méthodes telles que l'accès au titre du document, la récupération des URL et des liens, le comptage des images et l'exploration des propriétés du corps du document et des cookies, les participants acquerront des connaissances pratiques sur la manière dont JavaScript peut interagir dynamiquement avec les éléments et les métadonnées de la page web.

Créer un document HTML avec une structure de base

Dans cette étape, vous allez apprendre à créer un document HTML de base qui servira de base pour explorer les propriétés du DOM en JavaScript. Nous utiliserons l'IDE Web pour créer un fichier HTML avec une structure simple qui inclut les éléments essentiels.

Tout d'abord, accédez au répertoire ~/projet dans l'IDE Web. Créez un nouveau fichier appelé index.html en cliquant droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Copiez et collez le code HTML suivant dans le fichier index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>
    <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
    <img src="https://example.com/another-image.jpg" alt="Another Image" />
  </body>
</html>

Analysons les composants clés de ce document HTML:

<!DOCTYPE html> déclare que ceci est un document HTML5
<html lang="en"> définit la langue du document
<head> contient les métadonnées du document
<title> définit le titre de la page, que nous utiliserons dans les étapes suivantes
<body> contient le contenu visible de la page
Nous avons inclus deux balises <img> pour démontrer les propriétés du DOM liées aux images dans les étapes suivantes

Sortie exemple lorsque vous ouvrez ce fichier dans un navigateur:

[Une page web avec le titre "DOM Properties Exploration"
 affichant "Welcome to DOM Properties Lab"
 et "This page will help us explore JavaScript DOM properties."]

Cette structure HTML simple fournit le point de départ parfait pour notre laboratoire d'exploration des propriétés du DOM.

Accéder à la propriété du titre du document

Dans cette étape, vous allez apprendre à accéder à la propriété du titre du document à l'aide de JavaScript. Nous allons construire sur le fichier HTML créé dans l'étape précédente et démontrer comment récupérer et manipuler le titre du document.

Créez un nouveau fichier appelé script.js dans le répertoire ~/projet à l'aide de l'IDE Web. Ajoutez le code JavaScript suivant :

// Accéder au titre du document
console.log("Document Title:", document.title);

// Modifier le titre du document
function changeTitle() {
  document.title = "Updated DOM Properties Lab";
  console.log("New Document Title:", document.title);
}

// Ajouter un bouton pour démontrer le changement de titre
const button = document.createElement("button");
button.textContent = "Change Title";
button.onclick = changeTitle;
document.body.appendChild(button);

Maintenant, mettez à jour le fichier index.html pour inclure le fichier JavaScript :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>
    <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
    <img src="https://example.com/another-image.jpg" alt="Another Image" />

    <script src="script.js"></script>
  </body>
</html>

Lorsque vous ouvrez ce fichier HTML dans un navigateur, vous verrez les comportements suivants :

Sortie exemple dans la console du navigateur :

Document Title: DOM Properties Exploration

Lorsque vous cliquez sur le bouton "Change Title" :

New Document Title: Updated DOM Properties Lab

Concepts clés démontrés :

La propriété document.title récupère le titre actuel de la page
Vous pouvez modifier dynamiquement le titre du document à l'aide de JavaScript
Le titre apparaît dans l'onglet du navigateur et peut être modifié pendant l'exécution

Récupérer l'URL du document et les liens

Dans cette étape, vous allez apprendre à accéder à l'URL du document et à récupérer des informations sur les liens à l'aide des propriétés du DOM JavaScript. Nous allons mettre à jour le fichier script.js pour démontrer ces capacités.

Ouvrez le fichier script.js dans l'IDE Web et ajoutez le code suivant :

// Récupérer et afficher l'URL actuelle du document
console.log("Current Document URL:", document.URL);

// Obtenir le nombre de liens sur la page
const linkCount = document.links.length;
console.log("Total Number of Links:", linkCount);

// Afficher des informations sur tous les liens
function displayLinkInfo() {
  const links = document.links;
  console.log("Link Information:");
  for (let i = 0; i < links.length; i++) {
    console.log(`Link ${i + 1}:`);
    console.log(`  Href: ${links[i].href}`);
    console.log(`  Text: ${links[i].text}`);
  }
}

// Ajouter un bouton pour afficher les détails des liens
const linkButton = document.createElement("button");
linkButton.textContent = "Show Link Details";
linkButton.onclick = displayLinkInfo;
document.body.appendChild(linkButton);

Mettez à jour le fichier index.html pour inclure quelques liens supplémentaires :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
    <img src="https://example.com/another-image.jpg" alt="Another Image" />

    <script src="script.js"></script>
  </body>
</html>

Sortie exemple dans la console du navigateur :

Current Document URL: file:///home/labex/project/index.html
Total Number of Links: 2

Link Information:
Link 1:
  Href: https://example.com
  Text: Example Website
Link 2:
  Href: https://labex.io
  Text: LabEx Learning Platform

Concepts clés démontrés :

document.URL récupère l'URL complète du document actuel
document.links fournit une collection de tous les liens sur la page
Vous pouvez parcourir les liens et accéder à leurs propriétés telles que href et text

Compter et afficher les images sur une page

Dans cette étape, vous allez apprendre à compter et à afficher des informations sur les images d'une page web à l'aide des propriétés du DOM JavaScript. Nous allons mettre à jour le fichier script.js pour explorer les fonctionnalités liées aux images.

Ouvrez le fichier script.js dans l'IDE Web et ajoutez le code suivant :

// Compter le nombre d'images sur la page
const imageCount = document.images.length;
console.log("Total Number of Images:", imageCount);

// Fonction pour afficher les détails des images
function displayImageInfo() {
  const images = document.images;
  console.log("Image Information:");
  for (let i = 0; i < images.length; i++) {
    console.log(`Image ${i + 1}:`);
    console.log(`  Source: ${images[i].src}`);
    console.log(`  Alt Text: ${images[i].alt}`);
  }
}

// Créer un bouton pour afficher les détails des images
const imageButton = document.createElement("button");
imageButton.textContent = "Show Image Details";
imageButton.onclick = displayImageInfo;
document.body.appendChild(imageButton);

// Ajouter une zone d'affichage simple des informations sur les images
const infoDiv = document.createElement("div");
infoDiv.id = "image-info";
document.body.appendChild(infoDiv);

// Mettre à jour la div avec le nombre d'images
infoDiv.textContent = `Number of Images: ${imageCount}`;

Mettez à jour le fichier index.html pour inclure plus d'images avec différents attributs :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <div id="image-container">
      <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
      <img src="https://example.com/another-image.jpg" alt="Another Image" />
      <img src="https://example.com/third-image.png" alt="Third Image" />
    </div>

    <script src="script.js"></script>
  </body>
</html>

Sortie exemple dans la console du navigateur :

Total Number of Images: 3
Image Information:
Image 1:
  Source: https://example.com/sample-image.jpg
  Alt Text: Sample Image
Image 2:
  Source: https://example.com/another-image.jpg
  Alt Text: Another Image
Image 3:
  Source: https://example.com/third-image.png
  Alt Text: Third Image

Concepts clés démontrés :

document.images fournit une collection de toutes les images sur la page
Vous pouvez accéder aux propriétés des images telles que src et alt
Créer et manipuler dynamiquement des éléments de page à l'aide de JavaScript

Démontrez les propriétés du corps du document et des cookies

Dans cette étape, vous allez explorer les propriétés du corps du document et des cookies en JavaScript, apprenant à manipuler le contenu de la page et à travailler avec les cookies du navigateur.

Ouvrez le fichier script.js dans l'IDE Web et ajoutez le code suivant :

// Démontrez la manipulation du corps du document
function modifyBodyContent() {
  // Accédez et modifiez le corps du document
  const body = document.body;
  console.log("Original Body Inner HTML:", body.innerHTML);

  // Créez un nouvel élément de paragraphe
  const newParagraph = document.createElement("p");
  newParagraph.textContent =
    "Ce paragraphe a été ajouté dynamiquement au corps!";
  body.appendChild(newParagraph);

  console.log("Updated Body Inner HTML:", body.innerHTML);
}

// Démontrez les propriétés des cookies
function manageCookies() {
  // Définissez un nouveau cookie
  document.cookie =
    "labExperience=JavaScript DOM; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

  // Affichez tous les cookies
  console.log("Current Cookies:", document.cookie);

  // Créez un bouton pour afficher les cookies
  const cookieButton = document.createElement("button");
  cookieButton.textContent = "Show Cookies";
  cookieButton.onclick = () => {
    alert(`Cookies: ${document.cookie}`);
  };
  document.body.appendChild(cookieButton);
}

// Créez des boutons pour déclencher les démonstrations
const bodyButton = document.createElement("button");
bodyButton.textContent = "Modify Body Content";
bodyButton.onclick = modifyBodyContent;
document.body.appendChild(bodyButton);

const cookieButton = document.createElement("button");
cookieButton.textContent = "Manage Cookies";
cookieButton.onclick = manageCookies;
document.body.appendChild(cookieButton);

Mettez à jour le fichier index.html pour vous assurer de la compatibilité :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <div id="image-container">
      <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
      <img src="https://example.com/another-image.jpg" alt="Another Image" />
      <img src="https://example.com/third-image.png" alt="Third Image" />
    </div>

    <script src="script.js"></script>
  </body>
</html>

Sortie exemple dans la console du navigateur :

// Après avoir cliqué sur "Modify Body Content"
Original Body Inner HTML: [contenu HTML initial]
Updated Body Inner HTML: [contenu HTML avec le nouveau paragraphe ajouté]

// Après avoir cliqué sur "Manage Cookies"
Current Cookies: labExperience=JavaScript DOM

Concepts clés démontrés :

Accéder et modifier document.body
Créer et ajouter dynamiquement de nouveaux éléments
Définir et lire les cookies du navigateur
Interagir avec les propriétés du document à l'aide de JavaScript

Sommaire

Dans ce laboratoire, les participants apprennent à explorer les propriétés du Document Object Model (DOM) à l'aide de JavaScript en créant un document HTML structuré et en mettant en œuvre diverses techniques d'accès aux propriétés. Le laboratoire commence par la construction d'un fichier HTML de base qui inclut des éléments essentiels tels que le titre, le corps et les images, servant de base pour comprendre les interactions DOM.

L'exercice pratique guide les apprenants dans l'accès à différentes propriétés du document telles que le titre, l'URL, les liens et le nombre d'images, démontrant comment JavaScript peut récupérer et manipuler dynamiquement les métadonnées de la page web. En travaillant à travers ces étapes, les participants acquièrent une expérience pratique dans l'examen et l'interaction avec les propriétés fondamentales du DOM, renforçant leur compréhension des techniques de développement web côté client.

Explorer les propriétés du DOM en JavaScript

Introduction

Votre machine virtuelle, en un clic.

Créer un document HTML avec une structure de base

Accéder à la propriété du titre du document

Interagissez avec le code en temps réel.

Récupérer l'URL du document et les liens

Compter et afficher les images sur une page

La pratique rend maître.

Démontrez les propriétés du corps du document et des cookies

Sommaire