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.
children
children renvoie un HTMLCollection.
Démo
<body>
<main>
<h3>Quelques proverbes africains...</h3>
<div>
<p>Le femme est la ceinture qui tient le pantalon de l'homme.</p>
<p>Qui avale une noix de coco fait confiance à son anus.</p>
<p>Le mensonge donne des fleurs mais pas de fruits.</p>
<p>Le silence est la seule chose en or que les femmes n'aiment pas.</p>
<p>Quand le sage désigne la lune, l'idiot regarde le doigt.</p>
</div>
<h3>Quelques proverbes juifs...</h3>
<ul>
<li>Le plus fort est celui qui dompte ses passions.</li>
<li>Enseigne à ta langue à dire: je ne sais pas.</li>
<li>Le sage est supérieur au prophète.</li>
<li>Un âne reste un âne, même quand il se trouve parmi des milliers de chevaux.</li>
<li>Les aboiements des chiens n'inquiètent poit les nuages.</li>
</ul>
</main>
<button>Afficher des enfants</button>
<script>
const btn=document.querySelector("button");
const res=document.querySelector("main");
btn.addEventListener("click",balisesEnfants);
function balisesEnfants(){
document.write(res.children+"<br>");
console.log(res.children);
console.dir(res.children);
for(let i=0;i<res.children.length;i++){
document.write(res.children[i]+"<br>");
console.log(res.children[i]);
console.dir(res.children[i]);
}
}
</script>
</body>
firstElementChild et lastElementChild
firstElementChild et lastElementChild renvoie un HTMLElement.
Démo
<body>
<main>
<h3>Quelques proverbes africains...</h3>
<div>
<p>Le femme est la ceinture qui tient le pantalon de l'homme.</p>
<p>Qui avale une noix de coco fait confiance à son anus.</p>
<p>Le mensonge donne des fleurs mais pas de fruits.</p>
<p>Le silence est la seule chose en or que les femmes n'aiment pas.</p>
<p>Quand le sage désigne la lune, l'idiot regarde le doigt.</p>
</div>
<h3>Quelques proverbes juifs...</h3>
<ul>
<li>Le plus fort est celui qui dompte ses passions.</li>
<li>Enseigne à ta langue à dire: je ne sais pas.</li>
<li>Le sage est supérieur au prophète.</li>
<li>Un âne reste un âne, même quand il se trouve parmi des milliers de chevaux.</li>
<li>Les aboiements des chiens n'inquiètent poit les nuages.</li>
</ul>
</main>
<button>Afficher des enfants</button>
<script>
const btn=document.querySelector("button");
const res=document.querySelector("main");
btn.addEventListener("click",balisesEnfants);
function balisesEnfants(){
document.write(res.children+"<br>");
console.log(res.children);
console.dir(res.children);
for(let i=0;i<res.children.length;i++){
document.write(res.children[i]+"<br>");
console.log(res.children[i]);
console.dir(res.children[i]);
}
}
</script>
</body>
