DocumentFragment: getElementById() メソッド

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.

getElementById() は DocumentFragment のメソッドで、id プロパティが指定された文字列に一致する Element オブジェクトを返します。要素の ID は指定された場合は一意であることが求められるため、特定の要素に素早くアクセスする方法として有効です。

ID を持っていない要素へアクセスする必要がある場合は、querySelector() を使用すると任意のセレクターを用いて要素を検索することができます。

メモ: ID は単一の文書フラグメント内で一意である必要があります。2 つ以上の要素が単一の文書フラグメント内で同じ ID を持っている場合、このメソッドは最初に見つかった要素を返します。

構文

js
getElementById(id)

メモ: コードが機能するためには、このメソッドの名前における "Id" という大文字小文字の表記を正確にしなければなりません。getElementByID() のほうが自然に見えますが、正しくなく機能しません。

引数

id

探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。

返値

指定された ID に一致する DOM 要素オブジェクトを記述した Element オブジェクト、または文書内に一致する要素がなければ null です。

例

要素のリストを展開

この例では、文書に 1 つのアイテム Cherry を持つリストが格納されています。Apple、Orange、Banana、Melon の 4 つの項目を含む文書フラグメントを作成します。

次に、getElementById() を使用して、文書内とフラグメント内で Apple と Cherry を探した結果をログ出力します。この点で、Cherry は文書内にしか現れず、Apple はフラグメント内にしか現れません。

［フラグメントを文書に追加する］をクリックすると、文書内のリストにフラグメントが追加され、文書内とフラグメント内で Apple と Cherry の両方を探していた結果を再びログ出力します。この時点では、Apple と Cherry の両方が文書内に現れ、どちらもフラグメントには現れません。

これは、フラグメントを文書に追加すると、フラグメントのノードが DOM 内へ移動し、空の DocumentFragment が残るからです。

HTML

html
<button id="add">フラグメントを文書に追加</button>
<button id="reset">例をリセット</button> <br />
リストの内容:
<ul>
  <li id="Cherry">Cherry</li>
</ul>
フラグメントの内容:
<ul id="fragment"></ul>
現在の状態:
<pre id="log" />

JavaScript

js
// 文書フラグメントを初期コンテンツで作成
const fragment = new DocumentFragment();
["Apple", "Orange", "Banana", "Melon"].forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  li.id = fruit;
  fragment.append(li);
});

// ボタンがクリックされると、フラグメントをリストへ追加
document.getElementById("add").addEventListener("click", () => {
  document.querySelector("ul").append(fragment);
  displayStatus();
});

// 両方の結果を getElementById() でログ出力
function displayStatus() {
  const log = document.getElementById("log");
  log.textContent = "";
  ["Apple", "Cherry"].forEach((id) => {
    log.textContent += `document.getElementById("${id}") ${
      document.getElementById(id) ? "Yes" : "No"
    }\n`;
    log.textContent += `fragment.getElementById("${id}") ${
      fragment.getElementById(id) ? "Yes" : "No"
    }\n`;
  });

  // Empty the fragment viewer and fill it with the current content
  const fragmentViewer = document.getElementById("fragment");
  while (fragmentViewer.hasChildNodes()) {
    fragmentViewer.removeChild(fragmentViewer.lastChild);
  }
  for (entry of fragment.children) {
    fragmentViewer.appendChild(entry.cloneNode(true));
  }
}

// 初期状態をログ出力
displayStatus();

// リセットボタンをフック
document.getElementById("reset").addEventListener("click", () => {
  document.location.reload();
});

結果

仕様書

Specification
DOM Standard
# dom-nonelementparentnode-getelementbyid

ブラウザーの互換性

BCD tables only load in the browser

関連情報