En plus de contenir le code HTML, les éléments de notre DOM contiennent des tas de propriétés et méthodes qui représentent une mine d’or d’informations.
Et c’est grâce à ces propriétés et méthodes que Javascript pourra accéder et intéragir avec nos pages Web.
Astuce: On peut voir ces propriétés et méthodes dans la console en affichant tous les éléments enfants (children), puis en cliquant sur un élément spécifique.
Intéragir avec le texte d’un élément
Accéder au texte contenu dans un élément
console.log(document.body.children[0].textContent);
Modifier le texte de cet élément
document.body.children[0].textContent = "Nouveau Texte";
Vous vous demandez probablement:
Mais comment retenir quelles propriétés existent pour pouvoir intéragir avec ?
Si on fait console.log de l’élément, on voit qu’il y en a des dizaines.
console.log(document.body.children[0]);
Alors ne vous inquiétez pas ! Vous n’avez pas besoin de les retenir par coeur.
Les propriétés dont vous aurez le plus besoin sont par exemple textContent et surtout style pour modifier le style de nos éléments dont on va parler dans la prochaine vidéo.