IDを指定してノードへアクセス

広告

タグ名を指定したインデックス番号を指定する方法や階層構造を利用する方法でノードを取得する以外に、取得したいノードに対応する要素に「id」属性を設定しておき、「id」を指定してノードを取得することができます。

Documentインターフェースで用意されている「getElementById」メソッドを使います。(DOM Level 2で用意されました)。 

getElementById
Element getElementById(in DOMString elementId);

Returns the Element whose ID is given by elementId. If no such element
exists, returns null. Behavior is not defined if more than one element
has this ID. 

Parameters 
  elementId of type DOMString
  The unique id value for an element.
Return Value 
  Element  The matching element.

引数に取得したいノードに設定されている「id」属性の値を指定します。

例えばdiv要素に「id」属性は次のように記述します。 

<div id="idname">
</div>

同じ「id」属性の値は1つのHTMLページ内で一箇所にしか設定できない規則になっています。その為、「id」属性を指定することでノードを1つに特定することができます。実際に使う場合は次のように記述します。 

var node = document.getElementById("name");

「getElementById」メソッドの結果、取得できるものはNodeインターフェースであってNodeListではありませんので注意して下さい。「id」属性の値を指定した場合は必ず1つのノードだけが取得されるからです。(その為、getElementsByIdではなくgetElementByIdなので注意して下さい)。

サンプルコード

では簡単な例で試して見ましょう。今回はIEを対象としています。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="./js/script5_1.js">
</script>

<title>JavaScript テスト</title>
</head>
<body>

<p>変更されません</p>
<p id="target">変更対象です</p>
<p>変更されません</p>

<form>
<input type="button" value="変更" onClick="change()">
</form>

</body>
</html>

function change(){
  var node = document.getElementById("target");
  node.innerHTML = "変更しました";
}

3つある<p>要素の中で、「id」属性からノードを特定しそのノードに含まれる中身を書き換えています。

では実際にブラウザで表示させてみます。

p5-1

表示されているボタンをクリックして下さい。次のようにテキストが書き換えられます。

p5-2

ノードを取得する方法は基本的に以上のどれかの方法を用いて取得します。

( Written by Tatsuo Ikura )