Syntax
js
namedItem(name)
[name]
Parameters
name-
A string which will be used to match against the
nameoridattributes of the controls in thisHTMLFormControlsCollectionobject.
Return value
- A
RadioNodeListif there are multiple elements with the givennameorid, - An
Elementif there is exactly one element with the givennameorid, or nullif no element has the givennameorid.
Note:
The returned RadioNodeList is live, meaning that its contents automatically update if elements that match the given name are added to or removed from the collection. Furthermore, it may contain non-radio input elements despite the collection's name.
Examples
Using namedItem()
HTML
html
<form>
<label for="yes">Yes</label>
<input id="yes" name="my-radio" type="radio" />
<label for="no">No</label>
<input id="no" name="my-radio" type="radio" />
<label for="maybe">Maybe</label>
<input id="maybe" name="my-radio" type="radio" />
<br />
<label for="text1">Text input 1</label>
<input id="text1" name="my-form-control" type="text" />
</form>
<div id="output"></div>
div {
margin: 1rem 0;
}
JavaScript
js
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 = `My items: ${itemIDs}
My single item: "${item2.id}"`;
Result
Specifications
| Specification |
|---|
| HTML # dom-htmlformcontrolscollection-nameditem-dev |
Browser compatibility
See also
HTMLCollection.namedItemthat it replaces