Informatique


Le DOM

Aller à

Le DOM Représentations En résumé
 

Le DOM

Pour manipuler du code HTML dynamiquement en utilisant CSS ou JavaScript, nous avons besoin d’une interface qui va permettre d’accéder au code HTML.
Cette interface c'est le Document Object Model (DOM).

Le DOM d’une page web est créé automatiquement par le navigateur au chargement de la page.
Le DOM est un standard de programmation, il considère les éléments du document HTML comme des objets. Ces éléments vont donc posséder des propriétés et des méthodes.

Le DOM va également nous permettre de déclencher des événements, en CSS ces événements sont peu nombreux, nous approfondirons ce concept en JavaScript.

Le Document Object Model signifie signifie « Modèle Objet du Document »:

  • Modèle: le DOM représente le document chargé dans le navigateur, ce modèle est une arborescence dont chaque noeud représente un élément
  • Objet: en programmation, un objet est un conteneur qui comporte des propriétés et des méthodes. Les objets du DOM peuvent représenter le document, une balise, du texte ou un attribut.

La première chose à savoir concernant la structure du DOM est que tout dans une page HTML va être considéré comme un nœud (node en anglais):

  • le document HTML lui même
  • les balises HTML
  • les attributs des balises HTML
  • le texte

Le terme « node » est un terme générique qui sert à désigner tous les objets contenus dans le DOM.
En un mot : tout objet appartenant au DOM est un node, ou un nœud en français.

Représentations
Premier exemple

On ne représente que les noeuds "balises".


<!doctype html>
<html lang="fr">
<head>
	<meta charset=utf-8>
	<title>Mon site</title>
	<link rel=stylesheet href="mfs.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<header>Ma bannière</header>
	<nav>Ma barre de navigation</nav>
	<main>
		<article>
			<h1>Titre</h1>
			<p>Un paragraphe
				<span>du texte</span>
			</p>
		</article>
		<article>
			<h1>Titre</h1>
			<p>Un paragraphe</p>
			<p>Un paragraphe</p>
		</article>
	</main>
	<footer>Mon pied de page</footer>
</body>
</html>

Le Document object model

Deuxième exemple

Cette fois on représente les noeuds "attributs" et "textes" au sein de la représentation.

D'après Mrinitialman

Le DOM du code suivant peut être représenté selon un diagramme ou une arborscence. 


<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="Content-Script-Type" content="text/javascript">
		<title>My First Webpage</title>
	</head>
	<body>
		<h1 id="h1_1" title="The traditional starting point.">Hello World</h1>
		<p id="p_1"><strong id="strong_1">Welcome!</strong> This is my <em id="em_1">first</em> webpage!</p>
		<p id="p_2">It's a fairly simple webpage, but it <em id="em_2">is</em> a complete webpage.</p>
	<script type="text/javascript">
		// JavaScript will go here.
&	lt;/script>
	</body>
</html>

Les représentations: diagramme et arborescence:


Diagramme
Arborescence de noeuds
Document représente le noeud principal (root node)
Document Type représente le doctype.

Avec CSS, avec Javascript, avec tous les frameworks JS (VueJS, AngularJS, jQuery, etc.) on peut interagir sur les éléments du DOM en fonction, le plus généralement, d'une condition.
C'est dire l'importance de bien maîtriser la façon de parcourir le DOM.

Les sélecteurs vont nous permettre de cibler un élément du DOM afin de pouvoir interagir avec celui-ci.

En résumé

Chaque 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.

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

L'objet document représente la page html chargée dans le navigateur et sert de "porte d'entrée" dans le DOM, chaque noeud (node) de l'arborescence est un objet:

  • element pour les balises html
  • attribut pour les attributs des balises html
  • text pour les contenus informatifs des balises html
  • comment pour les commentaires

document possède de très nombreuses méthodes et propriétés, pour la totale cliquer ici.