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>
