HTMLFormControlsCollection : méthode namedItem()
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 HTMLFormControlsCollection.namedItem() retourne la collection RadioNodeList ou l'objet Element dans la collection dont le name ou l'id correspond au nom défini, ou null si aucun nœud ne correspond.
Notez que cette version de namedItem() masque celle héritée de HTMLCollection. Comme pour cette dernière, en JavaScript, l'utilisation de la syntaxe de crochets de tableau avec une chaîne de caractères (String), comme collection["value"], est équivalente à collection.namedItem("value").
Syntaxe
namedItem(name)
[name]
Paramètres
name-
Une chaîne de caractères utilisée pour comparer les attributs
nameouiddes contrôles dans cet objetHTMLFormControlsCollection.
Valeur de retour
- Une collection
RadioNodeLists'il y a plusieurs éléments avec lenameou l'iddonné, - Un objet
Elements'il y a exactement un élément avec lenameou l'iddonné, ou nullsi aucun élément n'a lenameou l'iddonné.
Note :
La RadioNodeList retournée est déynamique, ce qui signifie que son contenu se met automatiquement à jour si des éléments correspondant au nom donné sont ajoutés ou supprimés de la collection. De plus, elle peut contenir des éléments d'entrée qui ne sont pas radio malgré son nom.
Exemples
>Utiliser namedItem()
HTML
<form>
<label for="yes">Oui</label>
<input id="yes" name="my-radio" type="radio" />
<label for="no">Non</label>
<input id="no" name="my-radio" type="radio" />
<label for="maybe">Peut-être</label>
<input id="maybe" name="my-radio" type="radio" />
<br />
<label for="text1">Champ texte 1</label>
<input id="text1" name="my-form-control" type="text" />
</form>
<div id="output"></div>
JavaScript
const form = document.querySelector("form");
const items = form.elements.namedItem("my-radio");
const output = document.querySelector("#output");
const itemIDs = Array.from(items)
.map((item) => `"${item.id}"`)
.join(", ");
const item2 = form.elements.namedItem("my-form-control");
output.textContent = `Mes éléments : ${itemIDs}\nMon élément unique : "${item2.id}"`;
Résultat
Spécifications
| Specification |
|---|
| HTML> # dom-htmlformcontrolscollection-nameditem-dev> |
Compatibilité des navigateurs
Voir aussi
- La propriété
HTMLCollection.namedItemqu'elle remplace