Manipuler des documents

Quand on crit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manire ou d'une autre. On le fait gnralement en utilisant le Document Object Model (DOM), un ensemble d'API qui permettent de contrler le HTML et le style et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en dtails, ainsi que quelques API intressantes qui peuvent modifier votre environnement.

Prrequis :	Connaissances informatiques de base, notions lmentaires en HTML, CSS, et JavaScript, notamment les objets JavaScript.
Objectif :	Se familiariser avec les API du DOM, et les autres API souvent associes au DOM et la manipulation de document.

Dans cet article

Les principaux composants du navigateur
Le modle objet du document (Document Object Model)
Apprentissage actif : manipulations basiques du DOM
Apprentissage actif : une liste de courses dynamique
Rsum
Voir aussi

Les principaux composants du navigateur

Les navigateurs web sont des logiciels trs complexes avec beaucoup de composants, dont beaucoup ne peuvent pas tre contrls ou manipuls en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouills pour de bonnes raisons, la plupart du temps pour des raisons de scurit. Imaginez qu'un site web puisse accder vos mots de passe stocks ou d'autres informations sensibles, ou se connecter des sites web comme si c'tait vous ?

Malgr ces limitations, les API web nous donnent accs beaucoup de fonctionnalits, lesquelles nous permettent de faire plein de choses gniales avec les pages web. Il existe quelques lments vidents que vous utilisez rgulirement dans votre code jetez un coup d'il au diagramme suivant, il reprsente les principaux composants du navigateur directement impliqus dans l'affichage des pages web :

[]

La fentre est l'onglet du navigateur dans lequel une page web est charge. Elle est reprsente en JavaScript par l'objet Window. Utiliser les mthodes disponibles sur cet objet nous permet par exemple de rcuprer la taille de la fentre (voir Window.innerWidth et Window.innerHeight), manipuler le document charg dans cette fentre, stocker des donnes spcifiques ce document ct client (par exemple en utilisant une base de donnes locale ou autre mcanisme de stockage), attacher un gestionnaire d'vnement la fentre en cours, et plus encore.
Le navigateur reprsente l'tat et l'identit du navigateur web (la chane de caractres dcrivant l'agent utilisant par exemple) tel qu'il existe sur le Web. En JavaScript, il est reprsent par l'objet Navigator. Vous pouvez utiliser cet objet pour rcuprer des informations telles que la golocalisation, les prfrences de langue, un flux vido en provenance de la webcam, etc.
Le document (accd par le DOM dans les navigateurs) est la page actuellement charge dans la fentre. Il est reprsent en JavaScript par l'objet Document. Vous pouvez utiliser cet objet pour retourner et manipuler les lments HTML et CSS qui composent le document. Par exemple : rcuprer un lment dans le DOM, changer son texte, appliquer de nouveaux styles dessus, crer de nouveaux lments et les ajouter un lment comme enfant, ou mme en supprimer.

Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons galement quelques autres lments utiles.

Le modle objet du document (Document Object Model)

Le document charg dans chaque onglet de votre navigateur, et donc son contenu, est accessible via un modle objet du document Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente cre par le navigateur et qui permet aux langages de programmation d'accder facilement la structure HTML par exemple, le navigateur lui-mme l'utilise pour appliquer diffrents styles aux lments correspondants sur la page, tandis qu'un dveloppeur comme vous et moi peut l'utiliser pour manipuler le DOM avec du JavaScript aprs que la page ait t charge.

Nous avons cr une simple page d'exemple, dom-example.html (voir en direct). Essayez de l'ouvrir dans votre navigateur c'est une page trs simple qui contient un lment <section>, l'intrieur duquel se trouve une image et un paragraphe avec un lien. Le code source HTML ressemble a :

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Simple DOM example</title>
  </head>
  <body>
    <section>
      <img
        src="dinosaur.png"
        alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
      <p>
        Here we will add a link to the
        <a href="https://www.mozilla.org/">Mozilla homepage</a>
      </p>
    </section>
  </body>
</html>

Le DOM, quant lui, ressemble a :

[]

Note : Ce diagramme du DOM a t cr en utilisant l'outil Live DOM viewer de Ian Hickson.

Vous pouvez voir ici que chaque lment et morceau de texte dans le document possde sa propre entre dans l'arbre chacune tant appele nud (node). Vous rencontrerez galement plusieurs termes pour dcrire les diffrents type de nuds ou leur position dans l'arbre les uns par rapport aux autres :

Nud lment (element node): N'importe quel lment, tel qu'il existe dans le DOM.
Racine (root): Le nud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du nud HTML (d'autres langages de balisage tels que SVG et XML auront des racines diffrentes).
Enfant (child): Un nud directement l'intrieur d'un autre nud. Ainsi, dans l'exemple ci-dessus, IMG est un enfant de SECTION.
Descendant: Un nud n'importe o l'intrieur d'un autre nud. Par exemple, IMG est un enfant de SECTION mais galement l'un de ses descendants. En revanche IMG n'est pas un enfant de BODY, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants.
Parent: Un nud qui a un autre nud directement l'intrieur. Par exemple, BODY est le parent de SECTION.
Anctre (ancestor): Un nud qui a un autre nud n'importe o l'intrieur. Par exemple, BODY est l'anctre d'IMG.
Frres et surs (sibling): Des nuds qui ont le mme parent. Par exemple, IMG et P sont frres et surs.
Nud texte (text node): Un nud contenant une chane de caractres.

Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-tre dj rencontrs si vous avez tudi le CSS (par exemple avec slecteur descendant, slecteur enfant).

Apprentissage actif : manipulations basiques du DOM

Pour commencer l'apprentissage de la manipulation du DOM, commenons par un exemple concret.

Faites une copie locale de la page dom-example.html et de l'image qui l'accompagne.
Ajoutez un lment <script></script> juste avant la balise fermante </body>.
Pour manipuler un lment dans le DOM, vous allez d'abord slectionner cet lment et stocker une rfrence cet lment dans une variable. l'intrieur de votre lment <script>, ajoutez la ligne suivante :
js
```
const link = document.querySelector("a");
```
Maintenant que nous avons la rfrence l'lment enregistre dans une variable, nous pouvons commencer le manipuler en utilisant les proprits et les mthodes qui lui sont associes (celles-ci sont dfinies sur les interfaces telles que HTMLAnchorElement dans le cas d'un lment <a>, et sur les interfaces plus gnriques HTMLElement, et Node qui reprsente tous les nuds d'un DOM). Tout d'abord, changeons le texte du lien en mettant jour la valeur de la proprit Node.textContent. Ajoutez la ligne suivante la suite de la prcdente :
js
```
link.textContent = "Mozilla Developer Network";
```
Nous devons galement modifier l'URL cible par le lien, pour qu'il ne renvoie pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante, en bas de votre JavaScript :
js
```
link.href = "https://developer.mozilla.org";
```

Notez que, comme souvent en JavaScript, il y a plusieurs faons de slectionner et d'enregistrer une rfrence un lment dans une variable. Document.querySelector() est l'approche moderne recommande elle est pratique puisqu'elle permet de slectionner des lments en utilisant les slecteurs CSS. L'appel querySelector() que nous avons utilis plus tt rcupre le premier lment <a> qui apparat dans le document. Si vous souhaitez au contraire rcuprer plusieurs lments, vous pouvez utiliser Document.querySelectorAll(), qui rcupre tous les lments du document correspondant au slecteur, et retourne des rfrences vers ces lments dans un objet similaire un tableau appel un NodeList.

Il existe des mthodes plus anciennes pour rcuprer des rfrences aux lments, telles que :

Document.getElementById(), qui slectionne un lment grce son attribut id (par exemple : <p id="monId">Mon paragraphe</p>). L'identifiant est pass la fonction en paramtre, de la faon suivante : const elementRef = document.getElementById('monId').
Document.getElementsByTagName(), qui retourne un tableau contenant tous les lments de la page ayant un type donn, par exemple tous les <p>, <a>, etc. Le type de l'lment est pass comme paramtre de la fonction : const elementRefArray = document.getElementsByTagName('p').

Ces deux dernires mthodes fonctionnent mieux dans les navigateurs plus anciens que des mthodes plus modernes comme querySelector(), mais elles sont beaucoup moins pratiques. Regardez la documentation et essayez d'en trouver d'autres !

Crer et placer de nouveaux nuds

Ce qui prcde vous a donn un petit avant-got de ce que vous pouvez faire, mais allons plus loin et regardons comment crer de nouveaux lments.

Pour revenir notre exemple, commenons par rcuprer une rfrence notre lment <section> ajoutez le code suivant au bas de votre script existant (idem avec les lignes qui suivront) :
js
```
const sect = document.querySelector("section");
```
Nous allons maintenant crer un nouveau paragraphe grce Document.createElement(), et lui donner du contenu texte de la mme manire que prcdemment :
js
```
const para = document.createElement("p");
para.textContent = "We hope you enjoyed the ride.";
```
Nous pouvons prsent ajouter ce paragraphe au bas de la section en utilisant Node.appendChild() :
js
```
sect.appendChild(para);
```
Enfin, ajoutons un nud texte au premier paragraphe, pour finir la phrase joliment. Crons d'abord un nud texte avec Document.createTextNode() :
js
```
const text = document.createTextNode(
  "  the premier source for web development knowledge.",
);
```
Puis, aprs avoir rcupr une rfrence au premier paragraphe, ajoutons-y le nud texte :
js
```
const linkPara = document.querySelector("p");
linkPara.appendChild(text);
```

C'est l'essentiel de ce dont vous aurez besoin pour ajouter des nuds au DOM vous utiliserez beaucoup ces mthodes lorsque vous construirez des interfaces dynamiques (nous en verrons quelques exemples plus tard).

Dplacer et supprimer des lments

Il peut arriver qu'on veuille dplacer des nuds, ou mme les supprimer du DOM. C'est tout fait possible, voyons ici comment.

Par exemple, si on veut dplacer le premier paragraphe de notre exemple au bas de la section, on pourrait utiliser :

sect.appendChild(linkPara);

Cette commande va dplacer le paragraphe tout au bas de la section. On pourrait penser qu'elle va en fait ajouter une copie, mais ce n'est pas le cas : linkPara ne fait rfrence qu' un seul et unique lment. Pour copier le paragraphe, il faudrait utiliser Node.cloneNode() la place.

Supprimer des lments est galement plutt simple, ds lors qu'on a une rfrence de l'lment supprimer et de son parent. Dans notre cas, on peut simplement utiliser Node.removeChild(), comme ceci :

sect.removeChild(linkPara);

Si vous souhaitez supprimer un lment uniquement partir d'une rfrence cet lment, comme c'est souvent le cas, vous pouvez utiliser Element.remove() :

linkPara.remove();

Cette mthode ne fonctionne cependant pas dans les navigateurs plus anciens. Ils ne possdent en effet pas de mthodes pour dire un nud de se supprimer, et il faut donc procder comme suit :

linkPara.parentNode.removeChild(linkPara);

votre tour : essayez les lignes ci-dessus en les ajoutant votre code.

Manipuler le style

Il est possible de manipuler des styles CSS grce du JavaScript de plusieurs manires.

Pour commencer, vous pouvez obtenir une liste de toutes les feuilles de style associes un document en utilisant Document.stylesheets, qui retourne un objet, ressemblant un tableau compos d'objets CSSStyleSheet. Vous pouvez alors ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous tendre sur ces fonctionnalits, car elles sont archaques et il est difficile de manipuler le style avec. Il y a des techniques beaucoup plus simples.

La premire d'entre elles consiste ajouter des styles en ligne (inline styles), directement sur les lments que vous voulez mettre en forme de faon dynamique. Pour ce faire, on utilise la proprit HTMLElement.style, qui contient les informations de style en ligne de chaque lment du document. Vous pouvez dfinir des proprits de cet objet de faon pouvoir mettre jour directement le style des lments.

titre d'exemple, essayez d'ajouter les lignes suivantes notre exemple :

para.style.color = "white";
para.style.backgroundColor = "black";
para.style.padding = "10px";
para.style.width = "250px";
para.style.textAlign = "center";

Rafraichissez la page, et vous verrez que les styles ont t appliqus au paragraphe. Si vous regardez ce paragraphe dans l'Inspecteur du navigateur, vous verrez que ces lignes sont en effet ajoutes comme du style en ligne au document :
html
```
<p
  >
  We hope you enjoyed the ride.
</p>
```

Note : Vous remarquerez que les proprits JavaScript qui reprsentent les proprits CSS sont crites en camel case tandis que les versions CSS sont relies par des tirets (par exemple backgroundColor au lieu de background-color). Prenez garde ne pas les mlanger, sans quoi a ne fonctionnera pas.

Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons tudier maintenant.

Supprimez les cinq lignes prcdentes que nous avons ajoutes notre code JavaScript.

Ajoutez ce qui suit au sein de la balise <head> de votre HTML :

html

<style>
  .highlight {
    color: white;
    background-color: black;
    padding: 10px;
    width: 250px;
    text-align: center;
  }
</style>

Nous allons maintenant utiliser une mthode trs utile pour la manipulation HTML de manire gnrale : Element.setAttribute(). Cette fonction prend deux paramtres : le nom de l'attribut que vous voulez dfinir sur l'lment, et la valeur que vous voulez lui attribuer. Ici nous allons ajouter une classe highlight notre lment :
js
```
para.setAttribute("class", "highlight");
```
Rafrachissez votre page, et vous constaterez qu'il n'y a aucun changement par rapport au dernier exemple. Le CSS est toujours appliqu au paragraphe, mais la seule diffrence c'est qu'on a utilis une classe pour le faire et non des styles en ligne.

vous de choisir la mthode que vous souhaitez utiliser : chacune a ses avantages et ses inconvnients. Les styles en ligne demandent moins de prparation et sont utiles pour un usage simple, tandis que l'usage des classes est une mthode plus pure (on ne mlange pas le CSS et le JavaScript, on vite donc les styles en ligne, car c'est considr comme une mauvaise pratique). Au fur et mesure que vous construirez des applications plus volumineuses et complexes, vous allez probablement utiliser la deuxime mthode plus souvent, mais c'est vous de dcider.

ce stade, nous n'avons pas vraiment fait quoi que soit d'utile ! Il n'y a pas d'intrt gnrer du contenu statique avec du JavaScript autant l'crire directement en HTML sans passer par du JavaScript. Le JavaScript est plus complexe que du HTML, et comporte son propre lot de problmes (comme le fait qu'il ne puisse pas tre lu par les moteurs de recherche).

Dans les deux prochaines sections, nous verrons un exemple d'utilisation plus concret des API du DOM.

Note : Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).

Apprentissage actif : une liste de courses dynamique

Pour clore cet article, nous aimerions vous proposer un petit challenge : nous voulons crer une liste de courses simple qui nous permette d'ajouter des articles la liste de faon dynamique, le tout grce un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton :

L'article doit tre ajout la liste.
Chaque article de la liste doit avoir un bouton qui, quand on le presse, supprime cet lment de la liste.
Le champ doit tre vid et reprendre le focus pour que vous puissiez entrer directement un nouvel article.

La dmo termine doit ressembler a :

[]

Pour complter l'exercice, suivez les tapes ci-dessous, et assurez-vous que votre exemple se comporte comme dcrit ci-dessus.

Tout d'abord, tlchargez une copie du fichier shopping-list.html. Vous verrez qu'il contient un peu de CSS, une liste avec un titre, un champ, un bouton, une liste vide et un lment <script>. Vous apporterez toutes vos modifications l'intrieur du script.
Crez trois variables, contenant des rfrences aux lments de liste <ul>, de champ <input> et de bouton <button>.
Crez une fonction qui sera dclenche lorsqu'on clique sur le bouton.
l'intrieur du corps de la fonction, commencez par stocker la valeur actuelle (proprit value) du champ dans une variable.
Ensuite, videz le champ en dfinissant sa valeur comme une chane vide ''.
Crez trois nouveaux lments : un lment de liste <li>, un <span> et un bouton <button>, et stockez-les chacun dans des variables.
Attachez le <span> et le <button> comme enfants de <li>.
Dfinissez le contenu texte du <span> comme gal la valeur du champ que vous avez rcupr prcdemment, et le contenu du bouton Supprimer .
Attachez l'article <li> comme enfant de la liste.
Ajoutez un gestionnaire d'vnement au bouton Supprimer , de faon ce que lorsqu'on le clique le <li> dans lequel il se situe soit supprim.
Enfin, utilisez la mthode HTMLElement.focus pour donner le focus au champ, qu'il soit prt recevoir la valeur du prochain article de la liste de courses.

Note : Si vous bloquez vraiment, jetez un il notre liste de courses termine (voir en direct.)

Rsum

Nous avons fini notre tude de la manipulation de document et du DOM. ce stade, vous devriez comprendre quels sont les composants importants d'un navigateur web en matire de contrle de documents et certains aspects de l'exprience utilisateur sur le Web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour crer des fonctionnalits utiles.

Voir aussi

Il y a bien d'autres fonctionnalits que vous pouvez utiliser pour manipuler vos documents. Jetez un coup d'il quelques-uns de nos documents de rfrence pour en dcouvrir davantage :

Document
Window
Node
HTMLElement, HTMLInputElement, HTMLImageElement, etc.

(Voir notre Rfrence Web API pour une liste complte des API web documentes sur MDN !)

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 4 sept. 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu