HTMLCollection : méthode namedItem() - Les API Web | MDN
Baseline
Widely available
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.
Syntaxe
Paramètres
key-
Une chaîne de caractères représentant la valeur de l'attribut
idounamede l'élément recherché.
Valeur de retour
Le premier objet Element dans la HTMLCollection correspondant à key, ou null s'il n'y en a pas. Retourne toujours null si key est la chaîne vide.
Exemple
HTML
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);
Spécifications
| Specification |
|---|
| DOM # dom-htmlcollection-nameditem-key |