Table des matières
Dans la première partie de ce tutoriel, nous avons vu comment le DOM est structuré et comment il fonctionne, en cela nous continuerons à travailler avec lui afin d'étendre ses fonctionnalités et de pouvoir manipuler tous les éléments de notre document HTML.Travailler avec le DOM
Pour accéder à l'objet document, nous utilisons une variable de document globale; Cette variable est l'un des objets clés que le navigateur crée pour nous, car c'est via cet objet document que nous pouvons accéder à l'ensemble des informations du document et il nous donne un accès individuel à chaque objet document.
Comme toujours, voyons un exemple avec lequel nous pouvons réconcilier la théorie que nous connaissons avec la manière dont elle est appliquée dans la réalité.
ExempleIl existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.
L'un des aspects les plus intéressants des fruits est la variété disponible dans chaque pays. J'habite près de Londres, dans une région connue pour ses pommes.
Le code avec lequel nous utilisons le SOLEIL C'est assez court et simple, cependant il capte les différents usages que l'on peut lui donner, nous allons expliquer le code partie par partie pour voir comment nous avons utilisé les objets.
L'une des actions les plus basiques que nous pouvons utiliser est d'obtenir les informations du document HTML avec lequel nous travaillons, donc la première ligne que nous avons placée dans notre code fait exactement cela et nous pouvons le voir :
document.writeln ("
URL : "+ document.URL);
Dans ce cas, nous lisons la valeur de la propriété document.URL, qui renvoie l'URL du document en cours, c'est-à-dire l'URL que le navigateur a utilisé pour charger le document dans lequel nous avons le code.
On voit aussi comment on utilise la méthode writeln :
document.writeln ("
URL : "+ document.URL);
Cette méthode ajoute simplement du contenu à la fin de notre document HTML, dans ce cas particulier nous commençons par ajouter une balise
puis la propriété URL, avec cela nous avons déjà modifié la structure et le contenu du DOM.
Maintenant, la prochaine chose que nous avons faite a été de sélectionner tous les éléments qui ont la balise p dans le document, pour cela, nous utilisons la ligne suivante :
var elems = document.getElementsByTagName ("p");
Comment nous voyons la méthode getElementsByTagName C'est celle qui sert à notre propos, en même temps tout ce que cette méthode collecte nous l'assignons à la variable elems.
Dans la ligne suivante, nous faisons une itération sur la variable elems, en obtenant les objets attribués, pour chacun que nous allons itérer, nous allons ajouter une ligne de texte avec son identifiant et plus tard, nous allons changer ses attributs pour modifier son apparence .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Element ID:" + elems [i] .id); elems [i] .style.border = "moyen double noir"; elems [i] .style.padding = "4px"; }
Comme nous pouvons le voir, nous ajoutons une bordure à chaque élément que nous avons stocké dans nos éléments variables et en plus nous ajoutons un rembourrage.
Après tout cela, voyons enfin à quoi cela ressemble dans le navigateur :
AGRANDIR
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
