Résumé
attributes renvoie une collection des attributs spécifiés sur l'élément donné.
Syntaxe et valeurs
var collAttributes = elementNodeReference.attributes;
La collection de nœuds attributs renvoyée par cet objet est de type NamedNodeMap. Si l'élément n'a pas d'attributs spécifiés, l'objet renvoyée a une taille de 0 (zéro). Cet attribut est en lecture seule.
collAttributes est une référence à la collection des attributs.
Exemple
// récupère le premier élément <p> du document
var para = document.getElementsByTagName("p")[0];
var attr = para.attributes;
Notes
La collection renvoyée est du type NamedNodeMap, qui est une liste de nœuds objets et non de chaînes. Le nom et la valeur des objets attributs sont accessibles de manière indexée, comme dans l'exemple complet ci-dessous, qui récupère la paire nom/valeur du premier attribut du paragraphe « p1 » dans le document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemple de tableau d'attributs</title>
<script type="text/javascript">
function premierAttr()
{
var PremierPara = document.getElementById("p1");
var texteSortie = document.getElementById("result");
if(PremierPara.hasAttributes())
// on vérifie d'abord que l'élément a des attributs
{
texteSortie.value = PremierPara.attributes[0].name + "->"
+ PremierPara.attributes[0].value;
}
else {
texteSortie.value = "Aucun attribut à afficher.";
}
}
</script>
</head>
<body>
<p id="p1" style="color: green;">Exemple de paragraphe</p>
<form action="">
<p><input type="button" value="Affiche le nom et la valeur du premier attribut"
onclick="premierAttr();">
<input id="result" type="text" value=""></p>
</form>
</body>
</html>
L'objet attributes est une collection semblable à un tableau puisqu'il possède la propriété length et que l'on accède aux propriétés de l'objet attributes par un index numérique, mais il ne possède pas les méthodes spéciales caractéristiques des tableaux comme join, split, etc.
L'ordre des propriétés de la collection attributes n'est pas fiable — deux navigateurs recevant le même code HTML peuvent renvoyer un objet attributes avec les propriétés dans un ordre différent.
Pour accéder à un attribut spécifique, utilisez la méthode getAttribute ou la notation utilisant le point :
// Affiche l'id de l'élément s'il en possède un
if (element.id) {
alert ("L'id de l'élément est " + element.id);
}
else {
alert("L'élément n'a pas id");
}