introduction
Le * Document Object Model *, généralement appelé * DOM *, est un élément essentiel de la création de sites Web interactifs. C’est une interface qui permet à un langage de programmation de manipuler le contenu, la structure et le style d’un site Web. JavaScript est le langage de script côté client qui se connecte au DOM dans un navigateur Internet.
Presque chaque fois qu’un site Web effectue une action, telle que la rotation entre un diaporama d’images, l’affichage d’une erreur lorsqu’un utilisateur tente de soumettre un formulaire incomplet ou le basculement d’un menu de navigation, cela résulte de l’accès de JavaScript à et de la manipulation du DOM. Dans cet article, nous allons apprendre ce qu’est le DOM, comment travailler avec l’objet + document + et la différence entre le code source HTML et le DOM.
Conditions préalables
Afin de comprendre efficacement le DOM et ses liens avec le Web, il est nécessaire d’avoir une connaissance existante de HTML et de https. : //developer.mozilla.org/en-US/docs/Web/CSS [CSS]. Il est également utile de connaître la syntaxe fondamentale JavaScriptJavaScript et la structure de code.
Qu’est-ce que le DOM?
Au niveau le plus élémentaire, un site Web consiste en un document HTML. Le navigateur que vous utilisez pour afficher le site Web est un programme qui interprète HTML et CSS et rend le style, le contenu et la structure à la page affichée.
Outre l’analyse du style et de la structure du HTML et du CSS, le navigateur crée une représentation du document appelée Modèle d’objet de document. Ce * modèle * permet à JavaScript d’accéder au contenu textuel et aux éléments du site Web * document * sous la forme * d’objets *.
JavaScript est un langage interactif, et il est plus facile de comprendre de nouveaux concepts en le faisant. Créons un site Web très basique. Créez un fichier + index.html et enregistrez-le dans un nouveau répertoire de projet.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>Ce code est la source HTML familière d’un nouveau squelette de site Web. Il contient les aspects les plus essentiels d’un document de site Web - un doctype, et une balise + html + avec les noyaux + head + et '+ body + `imbriqués.
Pour ce faire, nous utiliserons le navigateur Chrome, mais vous pouvez recevoir une sortie similaire d’un autre navigateur moderne. Dans Chrome, ouvrez + index.html. Vous verrez un site Web ordinaire avec notre rubrique intitulée «Modèle d’objet de document». Faites un clic droit n’importe où sur la page et sélectionnez «Inspecter». Cela ouvrira les outils de développement.
Sous l’onglet "Eléments", vous verrez le DOM.
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/the-dom.png [Exemple de DOM]
Dans ce cas, une fois développé, il a exactement la même apparence que le code source HTML que nous venons d’écrire - un doctype et les quelques autres balises HTML que nous avons ajoutées. Le survol de chaque élément mettra en évidence l’élément respectif dans le site Web rendu. Les petites flèches situées à gauche des éléments HTML permettent de basculer l’affichage des éléments imbriqués.
L’objet Document
L’objet + document + est un objet intégré qui possède de nombreuses * méthodes * et * méthodes * que nous pouvons utiliser pour accéder à des sites Web et les modifier. Pour comprendre comment utiliser le DOM, vous devez comprendre comment les objets fonctionnent en JavaScript. Si vous ne vous sentez pas à l’aise avec le concept d’objets, consultez En savoir plus sur les objets en JavaScript.
Dans les outils de développement sur * index.html *, accédez à l’onglet Console. Tapez + document dans la console et appuyez sur` + ENTER`. Vous verrez que le résultat est le même que ce que vous voyez dans l’onglet Elements.
document;Output#document
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>Taper + document + et travailler directement dans la console n’est pas quelque chose que vous ferez généralement en dehors du débogage, mais cela vous aidera à préciser exactement ce qu’est l’objet + document + et à le modifier, comme nous le verrons plus loin. .
Quelle est la différence entre le code source DOM et HTML?
Actuellement, avec cet exemple, il semble que le code source HTML et le DOM soient exactement la même chose. Il existe deux cas dans lesquels le DOM généré par le navigateur sera différent du code source HTML:
-
Le DOM est modifié par JavaScript côté client
-
Le navigateur corrige automatiquement les erreurs dans le code source
Montrons comment le DOM peut être modifié par du JavaScript côté client. Tapez ce qui suit dans la console:
document.body;La console répondra avec cette sortie:
Output<body>
<h1>Document Object Model</h1>
</body>+ document est un objet,` + body + est une propriété de cet objet auquel nous avons accédé avec la notation par points. En soumettant `+ document.body + à la console, l’élément + body + et tout ce qu’il contient sont générés.
Dans la console, nous pouvons modifier certaines des propriétés actives de l’objet + body + sur ce site Web. Nous allons éditer l’attribut + style, en changeant la couleur d’arrière-plan en` + fuchsia`. Tapez ceci dans la console:
document.body.style.backgroundColor = 'fuchsia';Après avoir tapé et soumis le code ci-dessus, vous verrez la mise à jour en direct sur le site, à mesure que la couleur d’arrière-plan change.
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/modifying-the-dom.png [Modification DOM Live]
En passant à l’onglet Eléments ou en tapant + document.body dans la console à nouveau, vous verrez que le DOM a changé.
Output<body style="background-color: fuchsia;">
<h1>Document Object Model</h1>
</body>Le code JavaScript que nous avons saisi, attribuant + fuchsia + à la couleur d’arrière-plan du + body +, fait maintenant partie du DOM.
Cependant, faites un clic droit sur la page et sélectionnez «Afficher le source de la page». Vous remarquerez que la source du site Web ne contient pas le nouvel attribut de style que nous avons ajouté via JavaScript. La source d’un site Web ne changera pas et ne sera jamais affectée par le code JavaScript côté client. Si vous actualisez la page, le nouveau code que nous avons ajouté à la console disparaîtra.
L’autre instance dans laquelle le DOM peut avoir une sortie différente de celle du code source HTML est lorsqu’il y a des erreurs dans le code source. Un exemple courant en est la balise + table - une balise` + tbody` est requise dans un + table +, mais les développeurs ne parviennent souvent pas à l’inclure dans leur code HTML. Le navigateur corrigera automatiquement l’erreur et ajoutera le + tbody +, modifiant le DOM. Le DOM corrigera également les balises qui n’ont pas été fermées.
Conclusion
Dans ce tutoriel, nous avons défini le DOM, accédé à l’objet + document +, utilisé JavaScript et la console pour mettre à jour une propriété de l’objet + document + et passé en revue la différence entre le code source HTML et le DOM.
Pour des informations plus détaillées sur le DOM, consultez la page Document Object Model (DOM) sur le réseau de développeurs Mozilla.
Dans le prochain tutoriel, nous passerons en revue la terminologie HTML importante, en savoir plus sur l’arborescence DOM, découvrir quels sont les nœuds, en connaître les types les plus courants et commencer à créer des scripts interactifs avec JavaScript.