HTMLFormControlsCollection: namedItem() method
The HTMLFormControlsCollection.namedItem()
method returns
the RadioNodeList
or the Element
in the collection whose
name
or id
match the specified name, or null
if
no node matches.
Note that this version of namedItem()
hides the one inherited from
HTMLCollection
. Like that one, in JavaScript, using the array bracket
syntax with a String
, like collection["value"]
is
equivalent to collection.namedItem("value")
.
Syntax
js
namedItem(name)
[name]
Parameters
name
-
A string which will be used to match against the
name
orid
attributes of the controls in thisHTMLFormControlsCollection
object.
Return value
- A
RadioNodeList
,Element
, ornull
.
Examples
Using namedItem()
HTML
html
<form>
<label for="notes">Notes:</label>
<input id="notes" name="my-form-control" type="text" />
<label for="start">Start date:</label>
<input id="start" name="my-form-control" type="date" />
</form>
<div id="output"></div>
JavaScript
js
const form = document.querySelector("form");
const items = form.elements.namedItem("my-form-control");
const output = document.querySelector("#output");
const itemIDs = Array.from(items)
.map((item) => `"${item.id}"`)
.join(", ");
output.textContent = `My items: ${itemIDs}`;
Result
Specifications
Specification |
---|
HTML Standard # dom-htmlformcontrolscollection-nameditem-dev |
Browser compatibility
BCD tables only load in the browser
See also
HTMLCollection.namedItem
that it replaces