子ノードの取得

広告

あるノードを取得した後でそのノードの子ノードを取得するにはNodeインターフェースの「childNodes」プロパティを使います。 

childNodes
NodeList childNodes

「childNodes」プロパティを使うと、対象のノードに含まれる全ての子ノードのノードの集合(NodeList)を返してくれます。NodeListから特定のノードを取り出すには配列の形式でインデックス番号を指定するか「item」メソッドを使います。 

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

同じように子ノードを取得していくことで、更に深い階層にある子ノードを取得していく事が出来ます。

空白のノード

子ノードをインデックス番号で指定する場合には注意が必要です。同じ階層にあるノードを取得する際、先頭と最後、そしてノードとノードの間には空白のノードが含まれています。例えば次のような例で考えて見ます。 

<body>
<h1>タイトル</h1>
<p>サンプル</p>
</body>

まず「body」タグを持つノードを取得し、そのノードに含まれる子ノードの集合を取得したとします。その場合、子ノードの各インデックスに対応するノードは次の通りです。 

0 : 空白ノード
1 : h1ノード
2 : 空白ノード
3 : pノード
4 : 空白ノード

実はこういった対応表になるのはFireFoxやOperaのブラウザを使った場合です。IE(Internet Explorer)を使った場合は別の挙動をします。IEの場合には空白ノードが存在しないことになりますので、次のような対応表となります。 

0 : h1ノード
1 : pノード

このため、ブラウザ毎に別の記述方法を行わなければなりません。

サンプルコード

では簡単な例で試して見ましょう。今回は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/script4_1.js">
</script>

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

<div>
    <div>
        <p>変更前</p>
    </div>
</div>

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

</body>
</html>

function change(){
    var node = document.getElementsByTagName("body");
    node[0].childNodes[0].childNodes[0].childNodes[0].innerHTML = "変更しました";
}

まず「body」タグ名を持つノードを取得し、その3階層下のノードの中身を書き換えるサンプルです。IE用ですので、各インデックスは0となっています。

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

p4-1

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

p4-2

OperaやFireFoxで動作させるには子ノードのインデックス番号を次のように書き換える必要があります。(最初に「body」タグを持つノードを取得する部分は、「body」タグを持つノードの集合の中の何番目かであり空白ノードは元々含まれませんので0番目のままで結構です)。 

function change(){
  var node = document.getElementsByTagName("body");
  node[0].childNodes[1].childNodes[1].childNodes[1].innerHTML = "変更しました";
}

( Written by Tatsuo Ikura )