タグ名を指定してノードへアクセス

広告

ノードの中でも要素を表すノードに対してはDocumentインターフェースに対して次のメソッドを使うことでノードを直接取得することができます。 

getElementsByTagName
NodeList getElementsByTagName(in DOMString tagname)

Returns a NodeList of all the Elements with a given tag name in the 
order in which they would be encountered in a preorder traversal of
the Document tree. 

Parameterstagname
  The name of the tag to match on. The special value "*" matches all tags.
Return Value
  A new NodeList object containing all the matched Elements.

documentオブジェクトに対して「getElementsByTagName」メソッドを実行することで引数に指定したタグ名を持つ全ての要素のノードの集合(NodeList)を返してくれます。

NodeListはノードの配列です。<body>要素などは必ず1つしか存在しませんが、<p>要素などは１つの文書中に複数含まれている可能性がありますので、「getElementsByTagName」メソッドでは指定したタグ名を持つ要素をまとめて取得します。

配列として取得しますので、その中からさらに特定の要素を取り出すには配列のインデックスを指定して取り出します。実際の使い方は次の通りです。 

var nodes = document.getElementsByTagName("p");
var p_node = nodes[0];

又はNodeListインターフェースに対して「item」メソッドを使って特定のノードを取り出すことも可能です。 

item
Node item(in unsigned long index)

Returns the indexth item in the collection. If index is greater than
or equal to the number of nodes in the list, this returns null. 

Parametersindex
  Index into the collection.
Return Value
  The node at the indexth position in the NodeList, or null if that
    is not a valid index.

引数には取り出したい要素を表すインデックス番号を指定します。 

var nodes = document.getElementsByTagName("p");
var p_node = nodes.item(0);

同じタグ名を持つ要素の中では記述された順にインデックス番号が設定されています。

サンプルコード

では簡単な例で試して見ましょう。 

<!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/script3_1.js">
</script>

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

<p>1番目のノード</p>

<div>
    <p>2番目のノード</p>
    <div>
        <p>3番目のノード</p>
    </div>
</div>

<p>4番目のノード</p>

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

</body>
</html>

function change(){
    var node = document.getElementsByTagName("p");
    node[0].innerHTML = "node[0]";
    node[1].innerHTML = "node[1]";
    node[2].innerHTML = "node[2]";
    node[3].innerHTML = "node[3]";
}

各要素がインデックスの何番目に格納されているかを確認するテストです。最初には記述された順番にテキストが書かれています。

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

p3-1

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

p3-2

このように同じタグ名を持つ要素であれば、階層の深さに関係なくページ内に記述された順番にインデックスがふられていることが確認できます。

( Written by Tatsuo Ikura )