Maîtriser le DOM HTML JavaScript : créer des pages Web dynamiques et interactives-js tutoriel-php.cn

Maîtriser le DOM HTML JavaScript : créer des pages Web dynamiques et interactives

Mary-Kate Olsen

Libérer： 2024-12-20 02:57:12

original

356 Les gens l'ont consulté

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

JavaScript HTML DOM : un guide complet

Le Document Object Model (DOM) est une interface de programmation pour les documents Web. Il représente la structure d'une page Web sous la forme d'une arborescence d'objets, permettant aux développeurs de manipuler HTML et CSS à l'aide de JavaScript. En maîtrisant DOM, vous pouvez créer des pages Web dynamiques et interactives.

Qu'est-ce que le DOM ?

Le DOM est une représentation structurée d'un document HTML. Il permet à JavaScript d'accéder et de manipuler dynamiquement les éléments, les attributs et le contenu d'une page Web.

Exemple:

Pour ce HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Copier après la connexion

Accéder au DOM

JavaScript fournit des méthodes pour sélectionner et manipuler les éléments DOM.

Méthodes de sélection courantes

getElementById Sélectionne un élément par son ID.

   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

Copier après la connexion

getElementsByClassName Sélectionne les éléments par leur nom de classe (renvoie une collection).

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Copier après la connexion

getElementsByTagName Sélectionne les éléments par leur nom de balise (par exemple, div, p).

   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);

Copier après la connexion

querySelector Sélectionne le premier élément correspondant à un sélecteur CSS.

   const title = document.querySelector("#title");

Copier après la connexion

querySelectorAll Sélectionne tous les éléments correspondant à un sélecteur CSS (renvoie une NodeList).

   const paragraphs = document.querySelectorAll(".description");

Copier après la connexion

Manipulation du DOM

Une fois sélectionné, vous pouvez modifier les éléments, les attributs et le contenu de manière dynamique.

1. Changer le contenu

innerHTML : définit ou obtient le contenu HTML.

  document.getElementById("title").innerHTML = "Welcome to the DOM!";

Copier après la connexion

innerText ou textContent : définit ou obtient du texte brut.

  document.getElementById("title").innerText = "Hello, World!";

Copier après la connexion

2. Changer les attributs

Utilisez setAttribute et getAttribute pour modifier les attributs des éléments.

  const link = document.querySelector("a");
  link.setAttribute("href", "https://example.com");

Copier après la connexion

Modifiez directement les attributs tels que id, className ou src.

  const image = document.querySelector("img");
  image.src = "image.jpg";

Copier après la connexion

3. Changer de style

Modifiez directement les propriétés CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Copier après la connexion

Ajout et suppression d'éléments

1. Ajout d'éléments

createElement : Crée un nouvel élément.
appendChild : ajoute un élément à un parent.

   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

Copier après la connexion

2. Supprimer des éléments

removeChild : Supprime un élément enfant.

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Copier après la connexion

Gestion des événements dans le DOM

Les événements sont des actions ou des occurrences détectées par le navigateur, telles que des clics ou des pressions sur des touches.

Ajout d'écouteurs d'événements

Utilisez addEventListener pour lier des événements à des éléments.

   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);

Copier après la connexion

Événements communs

Événements de souris : clic, double-clic, survol, sortie de la souris
Événements de clavier : keydown, keyup
Événements de formulaire : soumettre, modifier, se concentrer

Traverser le DOM

Vous pouvez naviguer entre les éléments en utilisant les relations dans l'arborescence DOM.

Parent et enfants

parentNode : obtient le nœud parent.
childNodes : répertorie tous les nœuds enfants.
enfants : répertorie tous les éléments enfants.

   const title = document.querySelector("#title");

Copier après la connexion

Frères et sœurs

nextSibling : obtient le prochain nœud frère.
previousSibling : obtient le nœud frère précédent.

Fonctionnalités DOM avancées

1. Éléments de clonage

Créez un double d'un élément à l'aide de cloneNode.

   const paragraphs = document.querySelectorAll(".description");

Copier après la connexion

2. Travailler avec les classes

Utilisez la propriété classList pour manipuler les classes.

  document.getElementById("title").innerHTML = "Welcome to the DOM!";

Copier après la connexion

3. Utiliser des modèles

Les modèles HTML permettent un contenu réutilisable.

  document.getElementById("title").innerText = "Hello, World!";

Copier après la connexion

Meilleures pratiques pour la manipulation du DOM

Minimiser les refusions et les repeints :
- Modifications groupées du DOM pour éviter un rendu excessif.
- Utilisez documentFragment pour plusieurs mises à jour.
Utiliser la délégation d'événement :

Attachez des événements aux éléments parents au lieu des éléments enfants individuels.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Copier après la connexion

Évitez le JavaScript en ligne : Utilisez des scripts externes ou addEventListener pour une séparation nette du code.

Conclusion

Le JavaScript HTML DOM est un outil puissant pour créer des pages Web dynamiques et interactives. En maîtrisant la manipulation du DOM, la gestion des événements et les meilleures pratiques, les développeurs peuvent créer des applications réactives et conviviales qui améliorent l'expérience utilisateur globale.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!