HTMLCollection: namedItem() 方法

namedItem() 是 HTMLCollection 接口的方法，它返回集合中第一个 Element，其 id 或 name 属性与指定名称匹配，如果没有任何元素匹配则返回 null。

在 JavaScript 中，使用带 String 的方括号语法，例如 collection["value"] 等效于 collection.namedItem("value")。

语法

namedItem(key)

参数

key 是一个字符串，表示我们要查找的元素的 id 或 name 属性的值。

返回值

item 是 HTMLCollection 中与 key 匹配的第一个 Element，如果不存在，则为 null。

示例

HTML

html

<div id="personal">
  <span name="title">Dr.</span>
  <span name="firstname">Carina</span>
  <span name="lastname">Anand</span>
  <span id="degree">(MD)</span>
</div>

JavaScript

const container = document.getElementById("personal");

// Returns the HTMLSpanElement with the name "title" if no such element exists null is returned
const titleSpan = container.children.namedItem("title");

// The following variants return undefined instead of null if there's no element with a matching name or id
const firstnameSpan = container.children["firstname"];
const lastnameSpan = container.children.lastname;

// Returns the span element with the id "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);

规范

规范
DOM 标准 # dom-htmlcollection-nameditem-key

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。