Contenu principal
Apprendre à coder
Cours : Apprendre à coder > Chapitre 6
Leçon 3: Les méthodes d'accès au DOMRésumé : méthodes d'accès au DOM
Quelles méthodes pouvons-nous utiliser ?
Nous avons montré comment on peut utiliser les méthodes suivantes pour trouver un élément, ou des éléments, dans une page Web :
Que retournent-elles ?
var salmanDevise = document.getElementById("salmanDevise");
salmanDevise.innerHTML = "Les maths c'est cool !";Les méthodes
getElementsByClassName et getElementsByTagName retournent un objet HTMLCollection qui agit comme un tableau. Cette collection agit en "temps réel", ce qui signifie que la collection est mise à jour si des éléments, avec noms de balise, ou noms de classe, sont ajoutés au document.var equipeMembres = document.getElementsByClassName("membre-equipe");
for (var i = 0; i < equipeMembres.length; i++) {
console.log(equipeMembres[i].innerHTML);
}La méthode
querySelectorAll() retourne un objet NodeList, qui agit aussi comme un tableau. Cette liste est "statique", ce qui signifie que la liste ne se mettra pas à jour, même si de nouveaux éléments sont ajoutés à la page. La plupart du temps, vous ne différencierez pas les types de données retournés par ces deux méthodes quand vous les utiliserez, mais il est bon de savoir.var equipeMembres = document.querySelectorAll("membre-equipe");
for (var i = 0; i < equipeMembres.length; i++) {
console.log(equipeMembres[i].innerHTML);
}Utiliser des sous-requêtes
Une fois qu'on a trouvé un élément, on peut effectuer sur lui des sous-requêtes, en utilisant les méthodes que nous venons de montrer. Par exemple :
// trouver l'élément possédant cet ID :
var salmanDevise = document.getElementById("salmanDevise");
// trouver les <span> dans cet élément :
var deviseMots = salmanDevise.getElementsByTagName("span");
// afficher combien il y en a :
console.log(deviseMots.length);Explorer le DOM
Une autre façon d'accéder aux éléments consiste à "explorer" l'arbre du DOM. Chaque élément possède des propriétés qui pointent sur des éléments reliés à lui.
firstElementChild(premier élément enfant)lastElementChild(dernier élément enfant)nextElementChild/nextElementSibling(élément enfant suivant / élement suivant)previousElementChild/previousElementSibling(élément enfant précédent / élément précédent)childNodes(nœuds enfant)childElementCount(nombre d'éléments enfant)
Par exemple :
var salmanDevise = document.getElementById("salmanDevise");
for (var i = 0; i < salmanDevise.childNodes.length; i++) {
console.log(salmanDevise.childNodes[i]);
}Ces propriétés ne sont pas disponibles sur les nœuds
Text, seulement sur les nœuds Element. Pour s'assurer de pouvoir explorer un élément, on peut vérifier ses propriétés nodeType/nodeValue. Vous n'aurez probablement pas besoin d'utiliser, ou vous ne le souhaiterez pas, l'exploration du DOM, mais c'est une option supplémentaire à connaître.Vous souhaitez rejoindre la discussion ?
Merci beaucoup, c'est vrai que la notion des tableaux n'est pas tout de suite facile au début mais après à force de faire et refaire ca rentre haha(3 votes)- aidez-moi a resoudre ce defis:le modernisateur des question
<script>
// Step 1: Store all doth that are inside lis in dothEls
var dothEls=document.querySelector("ul,doth");
var doesls = document.querySelectorAll("span");
console.log(doesls);
// Step 2: Iterate through them and change doth to does
for (var i=0; i<doesls.length; i++)
{
doesls[i].innerHTML=("does");
}
</script>
merci d'avance...(1 vote)- vous n'avez pas bien selectionner les elements.
<script>
// Step 1: Store all doth that are inside lis in dothEls
var dothEls=document.querySelectorAll('ul .doth');
// Step 2: Iterate through them and change doth to does
for (var i = 0; i<dothEls.length; i++){
dothEls[i].innerHTML='does';
}
</script>(1 vote)