HTMLCollection.namedItem()

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

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

语法

const item = collection.namedItem(key);

参数

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

返回值

示例

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

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 Standard
# dom-htmlcollection-nameditem-key

浏览器兼容性

BCD tables only load in the browser