JavaTutoriel sur le script DOM avec exemple

Qu'est-ce que DOM dans JavaScénario?

JavaUn script peut accéder à tous les éléments d'une page web grâce au modèle objet de document (DOM). En effet, le navigateur web crée un DOM de la page web lors de son chargement. Le modèle DOM est créé sous forme d'arbre d'objets, comme ceci :

Chaque élément HTML d'une page devient un nœud dans cet arbre. Les navigateurs regroupent les nœuds DOM en quelques types principaux : les nœuds d'élément représentent des balises telles que… <p> or <div>Les nœuds de texte contiennent les mots visibles à l'intérieur d'une balise, les nœuds d'attribut stockent des valeurs telles que id or class, et les nœuds de commentaires préservent <!-- --> balisage. Le nœud racine est toujours le document objet, et tout autre élément est un descendant de celui-ci.

En utilisant le DOM, Javascénario Il peut effectuer de multiples tâches : créer de nouveaux éléments et attributs, modifier les éléments et attributs existants, et même supprimer des éléments et attributs existants. JavaLe script peut également réagir aux événements existants et en créer de nouveaux sur la page. Les sections suivantes expliquent comment sélectionner des éléments, les modifier et configurer les gestionnaires d'événements à l'aide d'exemples pratiques et exécutables.

Il est utile de se rappeler que le DOM n'est pas la même chose que le fichier source HTML. Le HTML téléchargé par un navigateur est du texte statique, mais le DOM qu'il construit à partir de ce texte est un modèle objet dynamique et vivant. Toute modification JavaLe script ajouté au DOM s'affiche immédiatement à l'écran, sans que le fichier HTML original ne soit jamais modifié.

Comment sélectionner des éléments DOM dans Javascénario

Avant JavaUn script peut modifier n'importe quel élément d'une page ; il doit d'abord sélectionner le nœud cible. Le DOM propose plusieurs méthodes de sélection, chacune adaptée à des situations différentes :

• obtenirElementById() : renvoie l'unique élément correspondant à un élément donné id attribuer.
• obtenirElementsByClassName() : renvoie une collection HTMLCollection active de tous les éléments possédant une classe donnée.
• obtenirElementsByTagName() : renvoie une collection HTML dynamique de tous les éléments ayant un nom de balise donné, comme par exemple : p or li.
• querySelector() : Renvoie le premier élément correspondant à un sélecteur CSS quelconque.
• querySelectorAll() : renvoie une NodeList statique de chaque élément correspondant à un sélecteur CSS.

Le tableau ci-dessous compare les quatre méthodes de sélection les plus couramment utilisées afin que vous puissiez choisir celle qui convient le mieux à votre projet.

Les fonctions `querySelector` et `querySelectorAll` acceptent tout sélecteur CSS valide, ce qui en fait le choix le plus flexible pour le code moderne. Essayez l'extrait de code ci-dessous dans une page contenant un élément avec id="title" et plusieurs éléments avec class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

getElementById et getElementsByClassName restent plus rapides pour les recherches simples, tandis que querySelector et querySelectorAll sont préférés chaque fois que la logique de sélection a besoin de la puissance de la syntaxe CSS complète, comme les sélecteurs d'attributs ou de descendants.

Comment modifier, créer et supprimer des éléments DOM

Une fois un élément sélectionné, JavaUn script peut lire ou modifier son contenu, ses attributs, et même son existence dans l'arbre. Grâce au DOM, JavaLe script peut créer de nouveaux éléments et attributs, modifier les éléments et attributs existants et supprimer complètement les éléments et attributs existants.

Modifier le contenu avec getElementById et innerHTML

1. getElementById : pour accéder aux éléments et attributs dont l'identifiant est défini.
2. innerHTML : Pour accéder au contenu d'un élément.

Essayez vous-même cet exemple :

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

La boîte d'alerte confirme que getElementById a localisé l'en-tête et que innerHTML a renvoyé le texte qui y était stocké.

Lisez chaque paragraphe avec getElementsByTagName

getElementsByTagName : pour accéder aux éléments et aux attributs à l'aide du nom de la balise. Cette méthode renverra un tableau de tous les éléments portant le même nom de balise.

Essayez vous-même cet exemple :

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Étant donné que getElementsByTagName renvoie une collection active, paragraphs[1] fait référence au deuxième paragraphe du document, et la mise à jour de innerHTML écrase immédiatement son texte à l'écran.

Créer et supprimer des éléments avec createElement et removeChild

Outre la modification du contenu existant de la page, le DOM permet d'ajouter de nouveaux éléments ou de supprimer ceux qui existent déjà :

• créerElement() : construit un nouveau nœud d'élément en mémoire.
• appendChild() : attache un nœud comme dernier enfant d'un élément parent.
• définirAttribut() : ajoute ou met à jour un attribut, tel que class or href, sur un élément.
• supprimerChild() : supprime un nœud enfant spécifié de son parent.

L'exemple ci-dessous crée un nouvel élément de liste, lui attribue un texte et une classe, l'ajoute à une liste existante, puis supprime le tout premier élément de cette même liste :

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

La méthode `createElement()` seule n'affiche rien, car le nœud existe uniquement en mémoire. Il n'apparaît que lorsqu'une méthode comme `appendChild()`, ou une méthode similaire telle que `prepend()`, l'ajoute à l'arborescence visible. Les navigateurs modernes prennent également en charge la méthode plus courte `node.remove()`, qui supprime directement un élément sans avoir besoin de référencer son parent, contrairement à l'ancienne syntaxe `parent.removeChild(node)`.

Comment gérer les événements dans Javascénario

Un événement est toute action que le navigateur peut détecter, comme un clic, une frappe au clavier ou le chargement d'une page. Vous pouvez ajouter un gestionnaire d'événements à un élément particulier de deux manières principales.

Associez un gestionnaire d'événements avec onclick ou addEventListener

La première approche, plus ancienne, consiste à assigner directement une fonction à la propriété on-event d'un élément :

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

OU bien, en utilisant la méthode moderne et plus flexible addEventListener() :

document.getElementById(id).addEventListener("click", functionname)

La méthode `addEventListener()` est généralement privilégiée car elle permet d'associer plusieurs gestionnaires à un même événement sur un même élément et accepte un troisième argument optionnel qui contrôle la capture, comme expliqué plus loin dans cette section. Elle est également compatible avec `removeEventListener()`, qui supprime un gestionnaire lorsqu'il n'est plus nécessaire, ce que la propriété `onclick` ne peut pas faire seule.

HTML prend également en charge un troisième style : un gestionnaire en ligne écrit directement sur la balise, tel que : <button onclick="clicked()">Click Me</button>Les gestionnaires en ligne mélangent balisage et logique et deviennent rapidement difficiles à maintenir, c'est pourquoi la plupart JavaLes développeurs de scripts les réservent aux démonstrations rapides et s'appuient sur addEventListener() pour les applications réelles.

Essayez-le : un exemple complet d’événement de clic

Essayez vous-même cet exemple :

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Cliquer sur le bouton déclenche la fonction clicked(), qui déclenche une JavaBoîte d'alerte du script confirmant que le gestionnaire d'événements s'est exécuté avec succès.

L'objet événement

Chaque gestionnaire d'événements reçoit automatiquement un objet événement comme premier argument. Cet objet contient des informations utiles sur l'événement survenu, notamment `event.target` (l'élément précis sur lequel l'action a été déclenchée), `event.type` (le nom de l'événement, par exemple « click ») et des méthodes telles que `event.preventDefault()`, qui empêche le comportement par défaut du navigateur, comme le fait de suivre un lien ou de soumettre un formulaire.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Deux autres propriétés complètent l'objet événement : event.currentTarget La méthode `event.target` fait toujours référence à l'élément auquel l'écouteur est attaché, même si `event.target` indique un enfant imbriqué. La méthode `event.stopPropagation()` interrompt la propagation d'un événement avant qu'il ne se propage ou ne soit capturé davantage. Associée à `preventDefault()`, cette méthode offre au gestionnaire un contrôle précis sur la suite des opérations.

Espaces BubblCapture, acquisition et délégation

Lorsqu'un événement se déclenche sur un élément imbriqué, il ne s'arrête pas là. bouillonnant Dans cette phase, l'événement remonte de l'élément cible à travers chaque ancêtre, jusqu'au document. capture Dans cette phase, qui s'exécute en premier et nécessite une activation, l'événement se propage du document vers la cible avant que la propagation ne commence. {capture: true} comme troisième argument de addEventListener() pour écouter pendant la phase de capture.

Délégation événementielle Cette méthode tire parti de la propagation des événements : au lieu d’associer un écouteur d’événements distinct à chaque élément enfant, un seul écouteur est associé à un élément parent commun, et l’objet `event.target` est analysé pour déterminer quel enfant l’a déclenché. Cela consomme moins de mémoire et couvre automatiquement les éléments ajoutés ultérieurement à la page.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

La délégation, associée à la propagation et à la capture, vous offre un contrôle précis sur la manière dont le DOM et les événements sont gérés. JavaLe script réagit à mesure qu'une page devient plus interactive.

FAQ