Informatique


Parcourir le DOM par les nodes (noeuds)

Aller à

Référence générale

L'objet element du DOM contient les méthodes permettant de parcourir le DOM.

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


Le type et le nom d'un noeud

nodeType et nodeName

nodeType renvoie un entier:

  • 1 s'il s'agit d'un noeud de type élément (une balise)
  • 2 s'il s'agit d'un noeud de type attribut
  • 3 s'il s'agit d'un noeud de type texte
  • 8 s'il s'agit d'un noeud de type commentaire
  • 10 s'il s'agit du doctype

nodeName renvoie le nom du noeud.

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");
		div1.innerHTML+="Type de noeud: "+div1.nodeType+
				"<br> Nom du noeud: "+div1.nodeName;
	</script>
</body>

parentNode

La propriété parentNode renvoie le parent de la balise sur laquelle on demande l'application de la propriété.

Démo
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		.c1	{color:red;}
		.c2	{color:green;}
		.taille{font-size:2em;}
		.deco{text-decoration:underline;}
	</style>
</head>

<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div>
		<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 <strong>site</strong>.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>
	</div>
	<script>
	var para=document.querySelector("p");
	var cible=para.parentNode;
	alert(cible);
	cible=para.parentNode.parentNode;
	alert(cible);
	cible=para.parentNode.parentNode.parentNode;
	alert(cible);
	cible=para.parentNode.parentNode.parentNode.parentNode;
	alert(cible);
	cible=para.parentNode.parentNode.parentNode.parentNode.parentNode;
	alert(cible);


	</script>
</body>

</html>

childNodes

La propriété childNodes renvoie un tableau NodeList contenant tous les enfants directs de la balise sur laquelle on demande l'application de la propriété.

Démo
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		.c1	{color:red;}
		.c2	{color:green;}
		.taille{font-size:2em;}
		.deco{text-decoration:underline;}
	</style>
</head>

<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div>
		<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 <strong>site</strong>.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>
	</div>
	<script>
	var para=document.querySelector("div");
	var cible=para.childNodes;
	console.log(cible);
	for(let i=0;i<cible.length;i++){
	document.write(cible[i]+"<br>");
	}
	</script>
</body>

</html>

La liste des enfants tient compte très précisément de l'écriture du code, les espaces et retours à la ligne sont des enfants text dans childNodes


firstChild, lastChild, nextSibling, previousSibling

La propriété firstChild pointe vers le premier élément de la liste childNodes, elle correspond à chilNodes[0]

La propriété lastChild pointe vers le premier élément de la liste childNodes, elle correspond à chilNodes[n].

La propriété nextSibling pointe vers l'élément suivant.

La propriété previousSibling pointe vers l'élément précédent.

Démo
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		.c1	{color:red;}
		.c2	{color:green;}
		.taille{font-size:2em;}
		.deco{text-decoration:underline;}
	</style>
</head>

<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div>
		<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 <strong>site</strong>.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>
	</div>
	<script>
	var para=document.querySelector("div");
	var cible=para.childNodes[2];
	console.log(cible.nextSibling);
	document.write(cible.nextSibling);
	console.log(cible.previousSibling);
	document.write(cible.previousSibling);
	</script>
</body>

</html>

Le résultat peut paraître surprenant...

para.childNodes[2] cible le 3ième enfant de la balise <div>.
Le premier enfant, childNodes[0], correspond au saut de ligne.
Le deuxième enfant, childNodes[1], correspond au paragraphe <p>Je vous présente mon site.</p>.
Le troisième enfant, childNodes[2], correspond au saut de ligne.

Donc, cible.nextSibling, correspond à childNodes[3] qui est le paragraphe <p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>.

Donc, cible.previousSibling, correspond à childNodes[1] qui est le paragraphe <p>Je vous présente mon site.</p>.


childNode appliqué à document

Afficher les noeuds enfants de l'objet document.

Démo
	<style>
	#div1{
		width:40%;
		height:50px;
		padding:5px;
		background:salmon;
		}
	</style>
</head>

<body>
    <div id="div1">
		On fait la guerre quand on veut, on l'arrête quand on peut! Machiavel.
    </div>
	<div id=res></div>
	<br>
	<button>Afficher les noeuds enfants de l'objet document</button>
	<script>
		const btn=document.querySelector("button");
		const res=document.querySelector("#res");
		btn.addEventListener("click",noeudsEnfants);
		function noeudsEnfants(){
			const noeud=window.document.lastChild;
			//const noeud=window.document.lastChild;
			var nbrNoeud=noeud.childNodes.length;
			res.innerHTML+="<h3>Nombre de noeuds: "+nbrNoeud+"</h3>";
			for(let i=0;i<nbrNoeud;i++){
				res.innerHTML+="-----------Indice:"+i+" --------<br>";
				res.innerHTML+="Nom du noeud:"+noeud.childNodes[i].nodeName+"<br>";
				res.innerHTML+="Type du noeud:"+noeud.childNodes[i].nodeType+"<br>";
				res.innerHTML+="Constructeur du noeud:"+noeud.childNodes[i].constructor+"<br>";
				
				}
			
			}
			</script>

Supprimer un élément

La méthode remove() supprime un élément.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
	#div1{
		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.
    </div>
	<br>
	<button>Supprimer la div#1</button>
	<script>
		div1=document.getElementById("div1");
		del=document.getElementsByTagName("button")[0];
		del.addEventListener("click",demolir);
		function demolir(e){
			div1.remove();
		}
	</script>
</body>