Informatique


Accéder aux balises HTML

Aller à

Le DOM

Le DOM est un modèle hiérarchisé en une arborescence de l'ensemble des éléments du document.
Chaque élément forme un noeud (node) dans le document.

Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation (API application programming interface) pour les documents HTML.
Il est constitué d'un ensemble d'objets permettant d'interfacer le document HTML: Document, Element, Attr, Text, etc.
L'objet racine du DOM est l'objet document.

documentpour modéliser le document lui-même
elementpour modéliser un élément (une balise)
attrpour modéliser un attribut
textpour modéliser le texte contenu dans un élément (une balise)
Tous ces types objets dérivent d'un type commun, le type Node. Ce dernier est utilisé pour représenter n'importe quel noeud trouvé dans un document (noeuds documents, noeuds éléments, noeuds attributs, noeuds textes, noeuds commentaires...)

Le DOM est créé par le browser lorsque le document HTML est chargé, Les noeuds sont liés les uns aux autres via des relations de type parent/enfants, on peut parler d'arborescence car un noeud (balise, attribut ou texte) ne peut avoir qu'1 et un seul parent et 0 ou n enfants.
Les enfants d'un même noeud (balise, attribut ou texte) sont considérés comme des frères.

Tout dans une page HTML sera considéré comme un noeud (node en anglais) : le document HTML lui même, les éléments HTML, les attributs HTML et le texte ou images à l’intérieur des éléments.

Exemple
Démo
<head>
<title>Comprendre le DOM</title>
<meta charset="utf-8">
<style type="text/css">
    div, p {
        padding:5px;
        margin:5px;
    }
    div {
        border:1px solid #333;
    }
    .paraBold {
        font-weight: bold;
    }
</style>
   
    
</head>
<body>
  <h1>Le DOM est une arborescence</h1>
  <div id="main1">
    <p>Un bien beau paragraphe</p>
    <div id="bloc">
      <span class="span">Un bloc contenant 3 paragraphes</span>
      <p class="para">Paragraphe A dans bloc</p>
      <p class="para">Paragraphe B dans bloc</p> 
      <p class="para paraBold">Paragraphe C dans bloc</p>
    </div>        
  </div>
  <div id="main2">Encore un div</div>
</body>

L'onglet Elements de la console permet de visualiser le DOM, la barre de statut affiche la position de l'élément sélectionné dans le DOM.

Le DOM permet:

  • d'obtenir une représentation structurée du document
  • de codifier la manière dont un script peut accéder à cette structure

Le DOM permet à un langage de programmation d'agir directement sur un document html en interragissant sur la structure du document.


Les objets de type HTMLElement

Chaque élément HTML possède un constructeur associé à sa balise: un élément DIV est de type HTMLDivElement, une image est de type HTMLImageElement.
Tous ces types héritent dans l'ordre suivant:

  • Object, au plus bas niveau
  • EventTarget, pour le gestionnaire d'événements
  • Node, chaque noeud est de ce type
  • Element, chaque élément (balise, attribut, texte) est de ce type
  • HTMLElement, chaque balise est de ce type
  • HTMLDivElement, chaque balise div est de ce type, il y a un type par balise.

Démo
<h2>Héritage des prototypes d'une balise HTML</h2>
<div id=main>Une bien belle balise div</div>
<script>
var plouc=document.getElementById("main");
function herit(monobj){
	var proto=Object.getPrototypeOf(monobj);
	
	var heritage=[];
	
	while(proto !== null){
		
		heritage[heritage.length]=proto.constructor.name;
		
		proto=Object.getPrototypeOf(proto);
	}
	return heritage;
}
console.log(herit(plouc));
console.log(herit(document));
</script>

Dans la console on a bien la hiérarchie de notre balise div:

De la même manière le document est un objet document de type HTMLDocument qui hérite de Object, EventTarget et Node.


getElementById()

La méthode getElementById() de l'objet Document (MDN ou W3School) renvoie un objet Element (MDN ou W3School) représentant l'élément dont la propriété id correspond à la chaîne de caractères spécifiée en paramètre.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
	</body>

	</html>
	<script>
		let titre=document.getElementById("maintitre");
		alert(titre);
	</script>

Dans la variable titre on trouve la chaîne "[object HTMLHeadingElement]".
C'est normal, on a pas demandé de renvoyer le contenu textuel de la balise, on a demandé de renvoyer l'élément qui porte l'id maintitre et cet élément est bien un HeadingElement.


getElementsByTagName()

La méthode getElementsByTagName() de l'objet Document renvoie tous les objets Element correspondant à la balise passée en paramètre sous forme d'un tableau.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
	</body>

	</html>
	<script>
		let para=document.getElementsByTagName("p");
		alert(para);
		console.log(para);
		for(let i=0;i<para.length;i++){
			document.write(para[i]);
		}
	</script>

On constate:

  • dans la variable para on trouve la chaîne "[object HTMLCollection]"
  • c'est normal, on a demandé de renvoyer l'ensemble des l'élément <p> et on reçoit bien un objet de type HtmlCollection
  • la variable para est donc un tableau qu'on peut parcourir avec une boucle
  • on a bien 2 éléments de type HTMLParagraphElement

Le type HTMLCollection est une sorte de tableau mais n'est pas à proprement parlé un tableau car il n'hérite pas du type Array. On ne peut pas utiliser forEach() ou map(), il faut utiliser une boucle classique pour le parcourir.


getElementsByClassName()

La méthode getElementsByClassName() de l'objet Document renvoie tous les objets Element correspondant à la classe passée en paramètre sous forme d'un tableau.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.getElementsByClassName("c1");
		alert(para);
		for(let i=0;i<para.length;i++){
			document.write(para[i]);
		}
	</script>

On constate:

  • dans la variable para on trouve la chaîne "[object HTMLCollection]"
  • c'est normal, on a demandé de renvoyer l'ensemble des l'élément de classe c1 et on reçoit bien un objet de type HTMLCollection
  • la variable para est donc un tableau qu'on peut parcourir avec une boucle
  • on a bien 3 éléments de type HTMLParagraphElement

Le type HTMLCollection est une sorte de tableau mais n'est pas à proprement parlé un tableau car il n'hérite pas du type Array. On ne peut pas utiliser forEach() ou map(), il faut utiliser une boucle classique pour le parcourir.


querySelector() et querySelectorAll()

Les méthodes querySelector() et querySelectorAll() renvoie un ou tous les objets Element correspondant au sélecteur CSS passé en paramètre.
querySelector() va renvoyer des informations relatives au premier élément trouvé correspondant au sélecteur CSS sélectionné.
tandquerySelectorAll() va renvoyer des informations sur tous les éléments correspondants sous forme d'un tableau.

querySelector()
Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelector("p a");
		alert(para);
		}
	</script>

On constate:

  • dans la variable para on trouve le premier élément trouvé pour le sélecteur mentionné en paramètre
  • la valeur renvoyée correspond ici à la valeur de l'attribut href
querySelectorAll()
Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelectorAll(".c1");
		alert(para);
		for(let i=0;i<para.length;i++){
			document.write(para[i]);
		}
	</script>

On constate:

  • dans la variable para on trouve l'ensemble des éléments trouvés pour le sélecteur mentionné en paramètre
  • c'est normal, on a demandé de renvoyer l'ensemble des l'élément de sélecteur .c1 et on reçoit un objet de type NodeList
  • la variable para est un tableau qu'on peut parcourir avec une boucle
  • on a bien 3 éléments de type HTMLParagraphElement

Le type NodeList est une sorte de tableau mais n'est pas à proprement parlé un tableau car il n'hérite pas du type Array. On ne peut pas utiliser forEach() ou map(), il faut utiliser une boucle classique pour le parcourir.


Accès directs

Il existe 3 cas dans lesquels on peut accéder directement à des éléments HTML à partir de document:

  • body, en écrivant document.body
  • forms en écrivant document.forms (reprend dans un type HTMLCollection toutes les balises form)
  • script en écrivant document.script (reprend dans un type HTMLCollection toutes les balises script)