Informatique


Parcourir le DOM

Aller à

L'objet Node

Les objets Document, Element, Event, etc. héritent de l'objet Node.

En conséquence, tous ces objets ont un accès direct aux propriété et méthodes de l'objet Node

Pour le détail cliquer ici


parentNode

La propriété parentNode de l'objet Node 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 de l'objet Node 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>