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 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); 結果
仕様書
| Specification |
|---|
| DOM # dom-htmlcollection-nameditem-key |