HTML DOM getElementById()メソッド

定義と使用法

getElementById()メソッドは、指定されたIDを持つ最初のオブジェクトへの参照を返します。

構文

document.getElementById(id)

説明

HTML DOMは、getElementById()の他にもgetElementsByName()やgetElementsByTagName()などの要素検索方法を定義しています。

ただし、ドキュメント内の特定の要素を検索するには、getElementById()が最も効果的です。

ドキュメントの特定の要素を操作する際には、その要素にid属性を設定し、(ドキュメント内で)ユニークな名前を指定することが最善です。それで、そのIDを使って望む要素を検索することができます。

例 1

<html>
<head>
<script type="text/javascript">
function getValue()
  
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  



<h1 id="myHeader" onclick="getValue()">これはヘッダーです</h1>
<p>ヘッダーをクリックしてその値をアラートします</p>

例 2

getElementById() は重要なメソッドであり、DOM プログラミングにおいて非常に一般的に使用されます。我々はツール関数を定義しており、getElementById() メソッドを短い名前で使用することができます:

function id(x) {
  if (typeof x == "string") return document.getElementById(x)
  return x;
  

この関数は、要素 ID を引数として受け取ります。そのような引数の各々に対して、使用前に x = id(x) と書くだけで良いです。