ICTFF Section Informatique

Référence générale

L'objet element du DOM contient les méthodes permettant d'accéder au contenu des balises.

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

Rappel

L’objet element va bien évidemment hériter de toutes les méthodes et propriétés de son parent document, et va également posséder des méthodes et des propriétés qui lui sont propres.

Notez qu’on va toujours utiliser les propriétés et méthodes de l’objet document sur document lui même.
Ainsi, on écrira document.getelementById() pour accéder à un élément HTML dans une page.

En revanche, on va appliquer les propriétés et méthodes de l’objet element sur des objets de type element, c’est-à-dire sur les éléments HTML sur lesquels on travaille en particulier.

On n’écrira donc pas element.innerHTML ; on appliquera innerHTML sur un élément en particulier ou plus exactement sur l’objet représentant l’élément (auquel on accèdera grâce aux méthodes de l’objet document).

Cela est logique et intuitif lorsqu’on y pense : on ne travaille jamais que sur un document à la fois, il n’y a donc pas d’ambiguïté par rapport à l’objet document. En revanche, lorsqu’on utilise innerHTML par exemple, on cherche à accéder au texte contenu dans un élément en particulier. Il faut donc cibler précisément cet élément avant.

Accéder au contenu d'une balise avec innerHTML

Cette méthode s'applique sur un objet element et renvoie l'intégralité du contenu de l'élément recherché, y compris le code html éventuellement présent.

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 class=a1>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('.a1').innerHTML;
		alert(para);
	</script>

Premier cas

Si la méthode qui accède à l'élément ne renvoie qu'un élémént on peut directement appliquer la propriété innerHTML.

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.getelementById('maintitre').innerHTML;
		alert(para);
	</script>

Deuxième cas

Si la méthode qui accède aux éléments renvoie est susceptible de renvoyer plus qu'un élément on ne peut pas directement appliquer la propriété innerHTML.
Pourquoi? Car dans ce cas la propriété est associée à la collection d'éléments et non à un seul élément, ce qui renverra inévitablement undefined.

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').innerHTML; //rencerra undefined
		let para=document.querySelectorAll('.c1');
		alert(para);
		for(let i=0;i<para.length;i++){
			document.write(para[i].innerHTML);
		}
	</script>

ATTENTION: dans le code précédent on aurait pu être tenté d'écrire: let para=document.querySelectorAll('.c1').innerHTML; mais cela ne fonctionne pas.
En effet il faut appliquer la propriété innerHTML à chaque item du tableau de l'objet element para.

Accéder au contenu d'une balise avec textContent

Cette méthode s'applique sur un objet element et renvoie uniquement le contenu textuel de l'élément recherché.

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 class=a1>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('.a1').textContent;
		alert(para);
	</script>

Cette propriété s'utilise comme innerHTML, les même remarques s'y rapportent également.

Modifier le contenu d'une balise avec innerHTML

Outre la possibilité de récupérer l'intégralité du contenu de l'élément recherché, cette méthode permet également de modifier le contenu d'une balise html.

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 class=a1>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('.a1');
		para.innerHTML="Coucou, mon nouveau contenu";
		//para.textContent="Coucou, mon nouveau contenu";
	</script>

Modifier le contenu d'une balise textContent

Outre la possibilité de récupérer le contenu textuel de l'élément recherché, cette méthode permet également de modifier le contenu d'une balise html.

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 class=a1>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');
		for(let i=0;i<para.length;i++){
			//para[i].innerHTML="Coucou, mon nouveau contenu "+i;
			para[i].textContent="Coucou, mon nouveau contenu "+i;
		}
	</script>

Positions de la balise au sein de son container

offsetLeft, offsetTop, clientHeight, clientWith

offsetLeft et offsetTop renvoient la position du bloc par rapport à son parent direct.

clientWidth et clientHeight renvoient les dimensions du bloc (width/height +padding).

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
	#div1{
		position:relative;
		left:50px;
		top:25px;
		width:50%;
		height:300px;
		padding:5px;
		background:red;
		}
	#div2{
		position:relative;
		left:50px;
		top:25px;
		width:20%;
		height:200px;
		padding:5px;
		background:yellow;
		}
	</style>
</head>

<body>
    <div id="div1">
    <div id="div2">
		On fait la guerre quand on veut, on l'arrête quand on peut! Machiavel.
    </div>
    </div>
	
	<script>
		div2=document.getElementById("div2");
		div2.innerHTML+="<br>Position du bloc #div1. Top: "+div2.offsetTop+", Left: "+div2.offsetLeft;
		div2.innerHTML+="<br>Dimensions du bloc #div1. Hauteur: "+div2.clientHeight+", Largeur: "+div2.clientWidth;
	</script>
</body>

On constate que les valeurs 33 et 58 dans le résultat, c'est normal, il faut compter la marge par défaut du body.

Dimensions et position par rapport à la fenêtre

La méthode getBoundingClientRect() renvoie les dimensions et la position du bloc par rapport à la fenêtre.

La méthode permet d'accéder à 4 propriétés: width, height, top, left

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
	#div1{
		position:relative;
		left:50px;
		top:25px;
		width:20%;
		height:300px;
		padding:5px;
		background:red;
		}
	</style>
</head>
<body>
    <div id="div1">
		On fait la guerre quand on veut, on l'arrête quand on peut! Machiavel.<br>
    </div>
		<script>
		div1=document.getElementById("div1");
		dim=div1.getBoundingClientRect();
		div1.innerHTML+="Largeur: "+dim.width+"<br>";
		div1.innerHTML+="Hauteur: "+dim.height+"<br>";
		div1.innerHTML+="Y: "+dim.top+"<br>";
		div1.innerHTML+="X: "+dim.left+"<br>";
	</script>
</body>