Attributs et Propriétés

Maîtriser JavaScript exige de comprendre comment il interagit avec le Document Object Model (DOM). Ce tutoriel couvre les attributs et les propriétés du DOM, en expliquant comment les lire, les modifier et les synchroniser pour manipuler des pages web de façon dynamique.

Introduction au DOM en JavaScript

Le DOM représente une page web sous la forme d'un arbre hiérarchique d'objets, permettant à des langages de programmation comme JavaScript d'interagir avec le contenu, le style et la structure de la page. Chaque élément du document HTML est reflété en tant qu'objet dans le DOM, et ces objets possèdent des propriétés et des attributs qui peuvent être manipulés avec JavaScript.

Différences entre Attributs et Propriétés

Bien que les termes « attributs » et « propriétés » soient souvent utilisés de façon interchangeable, ils ont des significations distinctes dans le contexte du DOM :

• Attributs : ils sont définis dans le code HTML. Ils fournissent des informations supplémentaires sur les éléments HTML. Les attributs sont toujours des string et sont accessibles via des méthodes comme getAttribute() et setAttribute().
• Propriétés : ce sont les caractéristiques des objets DOM qui représentent les éléments HTML. Les propriétés peuvent être de n'importe quel type de données, comme boolean, string ou nombre, et sont accessibles directement avec la notation pointée.

En résumé : un attribut est ce que vous avez écrit dans la source HTML ; une propriété est ce que le navigateur en a fait après l'avoir analysé et qu'il expose sur l'objet JavaScript. Ils semblent identiques pour des cas simples comme id, mais ce sont deux choses différentes.

Remarque sur la synchronisation : pour la plupart des attributs standard (comme id, class), modifier l'attribut met à jour la propriété correspondante et vice versa. Mais la synchronisation n'est pas garantie partout, et quelques attributs importants la rompent délibérément (voir Quand la synchronisation est rompue ci-dessous).

Exemple de code : accéder aux attributs et aux propriétés

<!-- snippet: html-result -->

<div id="demo" class="sample" data-level="1">Hello, World!</div>
<br />
<div>first getAttributes result (data-level): <span id="1"></span></div>
<div>className property: <span id="2"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");

  // Accessing an attribute
  let classAttribute = demoElement.getAttribute("data-level");  // Output: "1"
  span1.innerHTML = classAttribute;
  
  // Accessing a property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  const classNameProperty = demoElement.className;  // Output: "sample"
  span2.innerHTML = classNameProperty;
</script>

Les méthodes d'attribut

Chaque élément expose quatre méthodes standard pour travailler avec les attributs par leur nom. Elles opèrent toujours avec des string et correspondent directement à la source HTML :

Les noms d'attributs sont insensibles à la casse (id et ID sont identiques), et chaque valeur est lue comme une string, même si elle ressemble à un nombre.

Définir des attributs

Utilisez la méthode setAttribute() pour ajouter un nouvel attribut ou modifier la valeur d'un attribut existant sur un élément HTML.

Exemple de code : définir des attributs

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");
  
  // Changing the attribute
  demoElement.setAttribute("class", "changed");
  // The property updates automatically due to attribute-property synchronization
  span1.innerHTML = demoElement.className;
</script>

Ce fragment de code modifie l'attribut class de l'élément div en « changed ».

Supprimer des attributs

Pour supprimer complètement un attribut d'un élément HTML, utilisez la méthode removeAttribute(). C'est utile lorsque vous souhaitez retirer d'un élément un comportement ou un style spécifique défini par un attribut.

Combinez-la avec hasAttribute() pour agir de façon conditionnelle :

if (demoElement.hasAttribute("disabled")) {
  demoElement.removeAttribute("disabled");
}

Réassigner des propriétés

Les propriétés des éléments DOM peuvent être facilement réassignées directement en utilisant la notation pointée, ce qui permet une manipulation plus flexible des caractéristiques d'un élément.

Exemple de code : modifier des propriétés

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");

  // Changing the property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  demoElement.className = "changed";
  span1.innerHTML = demoElement.className;
</script>

Cet exemple modifie la propriété className de l'élément div, démontrant comment les propriétés peuvent être utilisées pour contrôler dynamiquement les caractéristiques d'un élément.

Quand la synchronisation attribut–propriété est rompue

Le mapping pratique un-pour-un comporte des exceptions qu'il faut connaître, sous peine de passer des heures à déboguer.

La propriété value des champs de saisie

L'attribut value contient la valeur initiale (par défaut) définie dans le HTML. La propriété value contient la valeur courante que l'utilisateur est en train de saisir. Après que l'utilisateur a modifié le champ, les deux divergent : la propriété change, l'attribut non.

// <input id="name" value="initial">
const input = document.getElementById("name");
// user types "Alice" into the field...

input.getAttribute("value"); // "initial"  — still the HTML default
input.value;                 // "Alice"     — the live, current value

La même logique s'applique à <input type="checkbox"> : l'attribut checked représente l'état par défaut, tandis que la propriété checked indique si la case est cochée à cet instant.

La propriété href des liens

Pour un <a href="/page">, getAttribute("href") retourne exactement ce que vous avez écrit ("/page"), mais la propriété href retourne l'URL absolue entièrement résolue ("https://example.com/page").

// <a id="link" href="/page">
const link = document.getElementById("link");
link.getAttribute("href"); // "/page"
link.href;                 // "https://example.com/page"

Règle pratique : utilisez les méthodes d'attribut quand vous avez besoin de la valeur brute telle qu'elle a été rédigée ; utilisez la propriété quand vous avez besoin de la valeur en direct et analysée par le navigateur.

Attributs boolean

Certains attributs HTML — disabled, checked, required, readonly, selected — sont boolean : leur simple présence signifie true, quelle que soit leur valeur. disabled="" et disabled="false" désactivent tous deux l'élément.

En JavaScript, la propriété correspondante est un vrai boolean, ce qui constitue le moyen le plus propre de les basculer :

button.disabled = true;   // adds the attribute, disables the button
button.disabled = false;  // removes the attribute, enables it

Évitez setAttribute("disabled", false) — car l'attribut est présent, l'élément reste désactivé. Définissez plutôt la propriété.

Attributs de données personnalisés

Les développeurs peuvent définir des attributs personnalisés préfixés par data-, qui est la manière standard et pérenne d'attacher des informations supplémentaires à un élément sans inventer des attributs non standard. Ils sont lus et écrits via la propriété dataset plutôt que via getAttribute.

La convention de nommage convertit le kebab-case du HTML en camelCase en JavaScript : data-author devient dataset.author, et data-order-status devient dataset.orderStatus. Vous pouvez aussi écrire dans dataset pour créer ou mettre à jour l'attribut data-* sous-jacent.

Exemple de code : attributs de données personnalisés

<!-- snippet: html-result -->

<div id="demo" data-author="Jane Doe" data-year="2022">Information Panel</div>
<br />
<div>author: <span id="1"></span></div>
<div>year: <span id="2"></span></div>
<script>
  const element = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");
  span1.innerHTML = element.dataset.author;
  span2.innerHTML = element.dataset.year;
</script>

Conclusion

Maîtriser les attributs et les propriétés du DOM vous permet de manipuler dynamiquement les éléments de la page et de créer des applications plus riches et interactives. Retenez la distinction fondamentale : les attributs sont les valeurs string de votre source HTML, tandis que les propriétés sont les valeurs typées et en direct sur l'objet DOM — et quelques attributs (value, href, les attributs boolean) maintiennent délibérément cette séparation.

Pour aller plus loin, explorez ces chapitres connexes :

• Modifier le document — créer, insérer et supprimer des éléments.
• Propriétés des nœuds : type, balise et contenu — lire et modifier le texte et le HTML d'un élément.
• Travailler avec les styles dans le DOM — manipuler le CSS via style et className.

Pratique