HTMLCollection : méthode namedItem()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La méthode namedItem() de l'interface HTMLCollection retourne le premier Element de la collection dont l'attribut id ou name correspond au nom défini, ou null si aucun élément ne correspond.

En JavaScript, au lieu d'appeler collection.namedItem("value"), vous pouvez aussi accéder directement à l'entrée par nom sur la collection, par exemple collection["value"], sauf si ce nom entre en conflit avec l'une des propriétés existantes de HTMLCollection.

html
<div id="personal">
  <span name="title">Dr.</span>
  <span name="first-name">Carina</span>
  <span name="last-name">Anand</span>
  <span id="degree">(MD)</span>
</div>

JavaScript

js
const container = document.getElementById("personal");

// Retourne le HTMLSpanElement nommé "title" ; si aucun élément de ce nom n'existe, null est retourné
const titleSpan = container.children.namedItem("title");

// Les variantes suivantes retournent undefined au lieu de null si aucun élément ne correspond au nom ou à l'id
const firstNameSpan = container.children["first-name"];
const lastNameSpan = container.children["last-name"];

// Retourne l'élément <span> dont l'id est "degree"
const degreeSpan = container.children.namedItem("degree");

const output = document.createElement("div");
output.textContent = `Result: ${titleSpan.textContent} ${firstNameSpan.textContent} ${lastNameSpan.textContent} ${degreeSpan.textContent}`;

container.insertAdjacentElement("afterend", output);