Le DOM (Document object Model)

Lorsqu'un navigateur charge une page Web, une des premières opérations qu'il effectue consiste à charger le DOM (Document Object Model).

Le DOM est une représentation objet des balises HTML de la page.

C'est donc grâce au DOM que JavaScript pourra manipuler les balises d'une page Web.

Alors, si vous voulez en savoir plus sur ce fameux DOM qui vous offre tant de fonctionnalités, lisez la suite de cet article !

▼Publicité


Mise à jour

J'ai ajouté des exemples de manipulations du DOM avec jQuery en plus de ceux avec JavaScript natif.

Notez bien que la manipulation des balises à l'aide du DOM ne nécessite pas l'utilisation de jQuery. On peut manipuler le DOM autant avec du JavaScript natif qu'avec jQuery qui, rappelons-le, est une bibliothèque JavaScript.

Pour bien visualiser le DOM, prenons l'exemple d'une page contenant les balises suivantes. Les éléments colorés seront repris dans les exemples plus bas.

HTML

<html>

<head>

    <title>Titre d'entête</title>

    ...

</head>

<body>

    <div id="page">

        <header>

            <a href="index.html">Mon site Web</a>

        </header>

        <div id="contenu">

            <section id="principal">

                <h1>Zone principale</h1>

                <p>J'apprend à manipuler le DOM. <img class="optionnel" src="smiley.png" alt=":-)" /></p>

            </section>

        </div>

        ...

    </div>

    ...

</body>

</html>

Puisque les éléments sont organisés de façon hiérarchique, on pourrait les représenter comme suit :

Le DOM

Cette représentation graphique illustre bien la hiérarchie des objets du DOM.

Les paragraphes suivants présentent quelques manipulations pouvant être faites à l'aide du DOM. 

Retrouver un élément HTML

Avec JavaScript comme avec jQuery, il est possible de retrouver un élément HTML par son ID, par le nom de la balise utilisée, par son attribut class ou encore par sa position par rapport aux autres éléments.

JavaScript natif

Voici quelques méthodes et propriétés utiles :

Notez que certaines propriétés ou méthodes du DOM ne peuvent s'appliquer au document dans son ensemble (ex : document.getElementById()) alors que d'autres peuvent être appliquées soit au document, soit à un de ses éléments (ex : getElementsByTagName()).

Ex :

JavaScript

var divisionContenu = document.getElementById('contenu');

var lesDiv = document.getElementsByTagName('div');   

var premiereImageOptionnelle = document.getElementsByClassName('optionnel')[0];  

var paragraphesDuContenu = divisionContenu.getElementsByTagName('p');  

Remarquez que certaines méthodes retournent un tableau (ex : document.getElementsByClassName()). Il est alors possible d'accéder à un élément en particulier à l'aide des crochets carrés.

jQuery

jQuery utilise les sélecteurs jQuery pour sélectionner des éléments du DOM. Cependant, l'utilisation d'un sélecteur jQuery retournera un objet jQuery plutôt qu'un objet JavaScript natif.

Voici quelques équivalences entre jQuery et JavaScript :

  • $('#idElement') : équivalent de document.getElementById()
  • $('nomBalise') : équivalent de getElementsByTagName()
  • $('.nomClasse') : équivalent de document.getElementsByClassName()
  • $('... :first-child) : équivalent de firstChild
  • $('...:last-child) : équivalent de lastChild
  • .next() (équivalent de nextSibling)

De plus, les sélecteurs jQuery peuvent comprendre des pseudo-classes afin de cibler plus précisément l'élément recherché (ex: :first, :visible, :text, :contains(), etc.).

Ex :

jQuery

var $divisonContenu = $('#contenu');

var $lesDiv = $('div');

var $premiereImageOptionnelle = $('.optionnel:first');

var $paragraphesDuContenu = $('#contenu p');

Objet JavaScript vs objet jQuery

Dans l'exemple précédent, les variables initialisées par jQuery portent un nom débutant par $. Dans ce contexte, le signe $ n'effectue rien de particulier. Il s'agit simplement d'un standard de nomenclature pour différencier les objets jQuery des objets JavaScript.

Grâce à ce standard de nomenclature, on saura que lorsque le nom d'une variable débute par $, il s'agit d'un objet jQuery. On pourra donc lui appliquer directement une méthode jQuery.

Ex :

jQuery

// la variable a été obtenue par un sélecteur jQuery : $('.optionnel:first')

// puisqu'il s'agit d'un objet jQuery, on peut lui appliquer directement une méthode jQuery

$premiereImageOptionnelle.removeClass("optionnel");

jQuery

// ici, on tente d'appliquer une méthode jQuery sur un objet JavaScript

// obtenu par document.getElementsByClassName()

// l'instruction suivante n'est pas valide

// elle génère l'erreur « Uncaught TypeError: premiereImageOptionnelle.removeClass is not a function »

premiereImageOptionnelle.removeClass("optionnel");

Si on souhaite appliquer une méthode jQuery à un objet JavaScript, il faut d'abord le convertir en objet jQuery à l'aide de $().

Ex :

jQuery

// cette fois, on transforme l'objet JavaScript en objet jQuery avant de lui appliquer la méthode jQuery

$(premiereImageOptionnelle).removeClass("optionnel");

Créer un nouvel élément HTML et l'ajouter dans la page

JavaScript natif

Il est possible d'effectuer des ajouts dans le code HTML à l'aide de :

Il faut ensuite ajouter dans la page Web l'élément ou le texte nouvellement créé. Il est possible de l'ajouter avant, après ou même à l'intérieur d'une balise existante à l'aide des méthodes suivantes :

Ex :

JavaScript

var nouveauParagraphe = document.createElement("p");

nouveauParagraphe.className = "commentaire";

var texte = document.createTextNode("Hello World");

nouveauParagraphe.appendChild(texte);

divisionContenu.getElementsByTagName('section')[0].insertBefore(nouveauParagraphe, paragraphesDuContenu[0]);

jQuery

Une fois qu'on a appris à manipuler le DOM, la création d'éléments HTML avec jQuery devient un jeu d'enfant. 

De nombreuses méthodes peuvent être utilisées, dont :

Dans la majorité des cas, jQuery offre une syntaxe plus concise que le JavaScript natif, comme en témoigne l'exemple suivant. Le résultat sera le même que dans l'exemple précédent qui utilisait du JavaScript natif.

Ex :

jQuery

$('#contenu section:first p:first').before('<p class="commentaire">Hello World</p>');

Notez cependant que puisque de nombreux chemins peuvent mener au même résultat, la syntaxe de l'exemple utilisant JavaScript aurait également pu être simplifiée.

Modifier un élément HTML

JavaScript natif

Il est possible de modifier les attributs d'un élément HTML existant à l'aide de :

L'extrait de code suivant montre comment le faire sur un élément unique :

JavaScript

nouveauParagraphe.innerHTML = "Vous allez adorer !";

Et celui-ci, sur un tableau d'éléments :

JavaScript

for (var i = 0; i < lesDiv.length; i++) {

    lesDiv[i].setAttribute('draggable', 'true');

    lesDiv[i].className = 'drag'; 

}

jQuery

Les méthodes jQuery suivantes vous permettront de modifier un élément HTML existant :

Ex :

jQuery

// on avait ajouté un paragraphe avant le premier paragraphe.

// Le nouveau paragraphe est donc maintenant le premier et c'est lui qu'on souhaite modifier.

$('#contenu section:first p:first').text("Vous allez adorer !");

jQuery

$('div').prop('draggable', 'true');

// contrairement à la propriété JavaScript className,

// la méthode jQuery addClass() n'écrasera pas les autres classes déjà assignées à l'élément HTML

$('div').addClass('drag'); 

Retirer un élément HTML

JavaScript natif

Voici pour terminer un exemple de code permettant de supprimer un élément HTML à l'aide de removeChild().

Remarquez l'astuce : on retrouve le parent de la balise puis on demande de supprimer son enfant.

JavaScript

premiereImageOptionnelle.parentNode.removeChild(premiereImageOptionnelle);

jQuery

Pour retirer un élément HTML à l'aide de jQuery, vous disposez des méthodes suivantes :

Ex :

jQuery

$('.optionnel:first').remove();

Pour plus d'information

« Category: Manipulation ». jQuery http://api.jquery.com/category/manipulation/

« Référence du DOM ». MDN - Mozilla Developer Network. https://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko

« Référence du DOM - element - Méthodes ». Mozilla Developer Network. https://developer.mozilla.org/fr/docs/DOM/element#M.C3.A9thodes

« Référence du DOM - document - Méthodes ». Mozilla Developer Network. https://developer.mozilla.org/fr/docs/DOM/document#M.C3.A9thodes

« JavaScript and HTML DOM Reference ». w3schools. http://www.w3schools.com/jsref/default.asp

« Document Object Model ». Wikipédia. http://fr.wikipedia.org/wiki/Document_Object_Model

« Manipuler le code HTML ». Open Classrooms. http://fr.openclassrooms.com/informatique/cours/dynamisez-vos-sites-web-avec-javascript/manipuler-le-code-html-partie-1-2

« The Javascript DOM ». About.com. http://javascript.about.com/library/bldom01.htm (consultez http://javascript.about.com/library/bldom21.htm pour voir une table des matières)

« JavaScript HTML DOM Document ». w3schools. http://www.w3schools.com/js/js_htmldom_document.asp

« The JavaScript Tutorial ». Javascript tutorial. http://javascript.info/

« Modifying the document ». Javascript tutorial. http://javascript.info/tutorial/modifying-document

« getElementById vs querySelector vs getElementsbyTagName vs getElementsByClassName ». jsPerf - JavaScript performance playground. http://jsperf.com/getelementbyid-vs-queryselector-vs-getelementsbytagname/3

« jQuery :first vs. .first() ». Stack Overflow. http://stackoverflow.com/questions/2312761/jquery-first-vs-first

« jquery attr() vs prop() (difference) ». Web Tutorials. http://jq4you.blogspot.ca/2013/04/jquery-attr-vs-prop-difference.html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories