Éditer les éléments HTML

Maintenant que nous avons vu comment accéder à un élément, nous allons voir comment l'éditer. Les éléments HTML sont souvent composés d'attributs (l'attribut href d'un <a> par exemple), et d'un contenu, qui est de type #text. Le contenu peut aussi être un autre élément HTML.

Comme dit précédemment, un élément HTML est un objet qui appartient à plusieurs objets, et de ce fait, qui hérite des propriétés et méthodes de ses objets parents.

Les attributs

Via l'objet Element

Pour interagir avec les attributs, l'objet Element nous fournit deux méthodes, getAttribute() et setAttribute() permettant respectivement de récupérer et d'éditer un attribut. Le premier paramètre est le nom de l'attribut, et le deuxième, dans le cas de setAttribute() uniquement, est la nouvelle valeur à donner à l'attribut. Petit exemple :

<body>

<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>

var link = document.getElementById('myLink');

var href = link.getAttribute('href'); // On récupère l'attribut « href »

alert(href);

link.setAttribute('href', 'http://www.siteduzero.com'); // On édite l'attribut « href »

</script>

</body>

On commence par récupérer l'élément myLink, et on lit son attribut href via getAttribute(). Ensuite on modifie la valeur de l'attribut href avec setAttribute(). Le lien pointe maintenant vers http://www.siteduzero.com.

Les attributs accessibles

En fait, pour la plupart des éléments courants comme <a>, il est possible d'accéder à un attribut via une propriété. Ainsi, si on veut modifier la destination d'un lien, on peut utiliser la propriété href, comme ceci :

<body>

<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>

var link = document.getElementById('myLink');

var href = link.href;

alert(href);

link.href = 'http://www.siteduzero.com';

</script>

</body>

C'est cette façon de faire que l'on utilisera majoritairement pour les formulaires : pour récupérer ou modifier la valeur d'un champ, on utilisera la propriété value.

La classe

On peut penser que pour modifier l'attribut class d'un élément HTML, il suffit d'utiliser element.class. Ce n'est pas possible, car le mot-clé class est réservé en Javascript, bien qu'il n'ait aucune utilité. À la place de class, il faudra utiliser className.

<!doctype html>

<html>

<head>

<title>Le titre de la page</title>

.blue {

background: blue;

color: white;

}

</style>

</head>

<body>

<p>Un peu de texte <a>et un lien</a></p>

</div>

document.getElementById('myColoredDiv').className = 'blue';

</script>

</body>

</html>

Dans cet exemple, on définit la classe CSS .blue à l'élément myColoredDiv, ce qui fait que cet élément sera affiché avec un arrière-plan bleu et un texte blanc.

Toujours dans le même cas, le nom for est réservé lui aussi en Javascript (pour les boucles). Vous ne pouvez donc pas modifier l'attribut HTML for d'un <label> en écrivant element.for, il faudra utiliser element.htmlFor à la place.

Faites attention : si votre élément comporte plusieurs classes (exemple : <a class="external red u">) et que vous récupérez la classe avec className, cette propriété ne retournera pas un tableau avec les différentes classes, mais bien la chaîne « external red u », ce qui n'est pas vraiment le comportement souhaité. Il vous faudra alors couper cette chaîne avec la méthode split() pour obtenir un tableau, comme ceci :

var classes = document.getElementById('myLink').className;

var classesNew = [];

classes = classes.split(' ');

for (var i = 0, c = classes.length; i < c; i++) {

if (classes[i]) {

classesNew.push(classes[i]);

}

alert(classesNew);

Là, on récupère les classes, on découpe la chaîne, mais comme il se peut que plusieurs espaces soient présentes entre chaque nom de classe, on vérifie chaque élément pour voir s'il contient quelque chose (s'il n'est pas vide). On en profite pour créer un nouveau tableau, classesNew, qui contiendra les noms des classes, sans « parasites ».

Le contenu : innerHTML

La propriété innerHTML est spéciale et demande une petite introduction. Elle a été créée par Microsoft pour les besoins d'Internet Explorer et vient tout juste d'être normalisée au sein du HTML5. Bien que non normalisée pendant des années, elle est devenue un standard parce que tous les navigateurs la supportaient déjà, et non l'inverse comme c'est généralement le cas.

Récupérer du HTML

innerHTML permet de récupérer le code HTML enfant d'un élément sous forme de texte. Ainsi, si des balises sont présentes, innerHTML les retournera sous forme de texte :

<body>

<p>Un peu de texte <a>et un lien</a></p>

</div>

var div = document.getElementById('myDiv');

alert(div.innerHTML);

</script>

</body>

Nous avons donc bien une boîte de dialogue qui affiche le contenu de myDiv, sous forme de texte :

Le contenu de myDiv est bien affiché

Ajouter ou éditer du HTML

Pour éditer ou ajouter du contenu HTML, il suffit de faire l'inverse, c'est-à-dire de définir un nouveau contenu :

document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une citation à la place du paragraphe</blockquote>';

Si vous voulez ajouter du contenu, et ne pas modifier le contenu déjà en place, il suffit d’utiliser += à la place de l'opérateur d'affectation :

document.getElementById('myDiv').innerHTML += ' et <strong>une portion mise en emphase</strong>.';

Toutefois, une petite mise en garde : il ne faut pas utiliser le += dans une boucle ! En effet, innerHTML ralentit considérablement l'exécution du code si l'on opère de cette manière, il vaut donc mieux concaténer son texte dans une variable pour ensuite ajouter le tout via innerHTML. Exemple :

var text = '';

while( /* condition */ ) {

text += 'votre_texte'; // On concatène dans la variable « text »

}

element.innerHTML = text; // Une fois la concaténation terminée, on ajoute le tout à « element » via innerHTML

Attention ! Si un jour il vous prend l'envie d'ajouter une balise <script> à votre page par le biais de la propriété innerHTML, sachez que ceci ne fonctionne pas ! Il est toutefois possible de créer cette balise par le biais de la méthode createElement() que nous étudierons au prochain chapitre.

Créé avec HelpNDoc Personal Edition: Générateur gratuit de livres électroniques et documentation