DOM

：

：

Document.getElementById() メソッド

　編集：2022.08.31 by T.A.

→

id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返す。

要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。

ID を持たない要素にアクセスする必要がある場合は、querySelector() で何らかのセレクターを使用して要素を検索することができます。

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

Element オブジェクト。一致する要素がなければ null です。

使用上のメモ

コードが機能するためには、メソッドの名前の中の "Id" は、大文字と小文字を正しく表記しなければなりません。getElementByID() は自然に見えますが、妥当ではなく動作しません。

Document.querySelector() や Document.querySelectorAll() などの他の要素検索メソッドとは異なり、getElementById() はグローバルの document オブジェクトに対してのみ利用可能であり、DOM のすべての要素オブジェクトのメソッドとしては利用できません。ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。

例

HTML： 

<html>
<head>
  <title>getElementById example</title>
</head>
<body>
  <p id="para">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
</html>

JavaScript： 

function changeColor(newColor){
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

¶以下省く

HTML： 

<SPAN id=IdTest>SPAN要素</SPAN>

JavaScript： 

D=document.getElementById("IdTest") //＝[object HTMLSpanElement]

HTML： 

<SPAN id=Idあ>SPAN要素</SPAN>

JavaScript： 

D=document.getElementById("Idあ"); //＝[object HTMLSpanElement]

英数以外のid名でも取得が可能で、アンカーなどに利用できる。 

Idあ.innerHTML="てすと";
てすと

と、なる。

テスト