HTMLCollection.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.

HTMLCollection 接口的 namedItem() 方法返回第一个与集合中的 id 或者 name 属性匹配成功的 Element,如果没有匹配成功,则返回 null

在 JavaScript 中,对一个 String 使用数组括号语法,例如 collection["value"] 等价于 collection.namedItem("value")

语法

js
const item = collection.namedItem(key);

参数

  • key 是一个字符串,表示我们正在查找元素的 id 或者 name 属性。

返回值

示例

HTML

html
<div id="personal">
  <span name="title">Dr.</span>
  <span name="firstname">John</span>
  <span name="lastname">Doe</span>
  <span id="degree">(MD)</span>
</div>

JavaScript

js
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);

规范

Specification
DOM
# dom-htmlcollection-nameditem-key

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
namedItem

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support