Informatique


Accéder aux balises HTML

Aller à

Référence générale

L'objet document du DOM représente la page HTML ouverte dans la fenêtre.
Cet objet contient les méthodes permettant d'accéder aux objet element de la page.

Pour les objets contenus dans le DOM cliquer ici et ensuite dans HTML DOM Reference choisir l'objet document.


Forme générale

Pour sélectionner une balise du DOM, on utilise la forme générale suivante:

Syntaxe
window.document.uneMéthodeDeSélection()
ou
Syntaxe
document.uneMéthodeDeSélection()

On part de window, le point permet d'accéder à document et le point suivant permet de cibler une méthode de sélection appartenant à l'objet document.
Le tout retourne un objet ou une collection d'objets element.

document est directement inclus dans window, ce qui permet le raccourci d'écriture.


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é.
Tandis quequerySelectorAll() 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 4 cas dans lesquels on peut accéder directement à des éléments HTML à partir de document:

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