HTMLFormControlsCollection：namedItem() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLFormControlsCollection.namedItem() 方法返回集合中的 RadioNodeList 或 Element，其 name 或 id 匹配指定名称，如果没有节点匹配，则返回 null。

请注意，此版本的 namedItem() 隐藏从 HTMLCollection 继承的项。与该方法类似，在 Javascript 中，使用数组括号语法和字符串，例如 collection["value"] 等价于 collection.namedItem("value")。

语法

js
namedItem(name)
[name]

参数

name

一个字符串，用于匹配 HTMLFormControlsCollection 对象中控件的 name 或 id 属性。

返回值

示例

使用 namedItem()

HTML

html
<form>
  <label for="notes">备忘录：</label>
  <input id="notes" name="my-form-control" type="text" />

  <label for="start">开始日期：</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 = `我的项目：${itemIDs}`;

结果

规范

Specification
HTML Standard
# dom-htmlformcontrolscollection-nameditem-dev

浏览器兼容性

BCD tables only load in the browser

参见