open

Modifier le document avec l'interface DOM

#1 Modifier le contenu d'un élément avec la propriété textContent open

Remplacer le contenu existant

Ici on remplace purement et simplement le contenu. On accède directement à l'objet correspond à l'élément en utilisant la méthode getElementById. On dit aussi qu'on accède à l'élément on ne précisera pas à chaque fois qu'il s'agit de l'objet du DOM correspondant à l'élément HTML.

Tester le code

Ajouter du contenu au contenu existant

Ici on lit le contenu existant et on lui ajoute quelque chose. On change la méthode d'accès à l'élément. Ici on sélectionne tous les éléments h1 de la page et on récupère un "tableau" même si il n'y a qu'un seul élément h1. Notre élément h1 se trouve à l'index 0 du tableau.

Tester le code

#2 Modifier les attributs d'un élément avec les propriétés des objets open

Ci dessous on va modifier la cible du lien. On va cibler google.fr au lieu de bing.fr. Pour cela on doit modifier l'attribut href. Pour sélectionner l'élément h1 on va se servir d'un sélecteur CSS et utiliser la méthode querySelector() qui retourne le premier élément en correspondance avec ce sélecteur.

On va ensuite directement accéder à l'attribut de l'élément en utilisant la propriété href de l'objet retourné par le sélecteur.

Tester le code

Dans la documentation vous pouvez voir la liste des attributs que vous pouvez modifier. Si vous avez fait les tutos précédents vous savez que la variable aElement est un objet de constructeur HTMLAnchorElement. Il suffit de cliquer sur cet élément dans le chapitre de la documentation "1.6.5. Object definitions" pour descendre sur l'élément et voir la liste des ses attributs et de ses méthodes. Vous avez également un lien vers son parent de constructeur HTMLElement.

#3 Modifier ou récupérer la valeur d'un attribut d'un élément avec setAttribute et getAttribute open

Ici on va utiliser les méthodes setAttribute() et getAttribute() de aElement pour lire ou affecter la valeur d'un attribut. Ces méthodes font parties d'une famille de fonctionnalités que l'on appelle des setter et des getter.

aElement est une instance de l'objet HTMLAnchorElement qui hérite de ces méthodes en tant qu'objet petit enfant de l'objet element. Vous pouvez retrouver la spécification de l'objet element dans cette documentation de la partie noyau.

Tester le code