Maison >interface Web >js tutoriel >Maîtriser le DOM HTML JavaScript : créer des pages Web dynamiques et interactives

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

Mary-Kate Olsenoriginal: 2024-12-20 02:57:12358parcourir

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

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!

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

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

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);

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

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

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

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

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!";

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

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

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");

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

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

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

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!

2. Supprimer des éléments

removeChild : Supprime un élément enfant.

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

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);

É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");

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");

2. Travailler avec les classes

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

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

3. Utiliser des modèles

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

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

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

É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!

JavaScript batch css html Object for select using class Interface Property Event Collection dom this innerHTML Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Démystifier la mission de déstructuration en JavaScriptArticle suivant：Démystifier la mission de déstructuration en JavaScript

Articles Liés

Voir plus