HTMLCollection: namedItem() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
namedItem() は HTMLCollection インターフェイスのメソッドで、この集合の中で id または name 属性が指定された名前に一致する Element の先頭のものを返します。一致する要素がなければ null を返します。
JavaScript では、配列のブラケット記法を文字列で collection["value"] のように使用すると、collection.namedItem("value") と同等になります。
構文
js
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
js
const container = document.getElementById("personal");
// "title" という名前の HTMLSpanElement を返す。そのような要素が存在しない場合は null を返す。
const titleSpan = container.children.namedItem("title");
// 以下の変化形は、name や id が一致する要素がない場合、null ではなく undefined を返す
const firstnameSpan = container.children["firstname"];
const lastnameSpan = container.children.lastname;
// id が "degree" である span 要素を返す
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 |