←
子ノードの取得
あるノードを取得した後でそのノードの子ノードを取得するには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>＜br>＜p>サンプル＜/p>＜br>＜/body>
まず「body」タグを持つノードを取得し、そのノードに含まれる子ノードの集合を取得したとします。その場合、子ノードの各インデックスに対応するノードは次の通りです。
0 : 空白ノード
1 : h1ノード
2 : 空白ノード
3 : pノード
4 : 空白ノード
実はこういった対応表になるのはFireFoxやOperaのブラウザを使った場合です。IE(Internet Explorer)を使った場合は別の挙動をします。IEの場合には空白ノードが存在しないことになりますので、次のような対応表となります。
0 : h1ノード
1 : pノード
このため、ブラウザ毎に別の記述方法を行わなければなりません。
サンプルコード
では簡単な例で試して見ましょう。今回はIEを対象としています。
sample4_1.html
＜!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>
script4_1.js
function change(){
var node = document.getElementsByTagName("body");
node[0].childNodes[0].childNodes[0].childNodes[0].innerHTML = "変更しました";
}
まず「body」タグ名を持つノードを取得し、その3階層下のノードの中身を書き換えるサンプルです。IE用ですので、各インデックスは0となっています。
では実際にブラウザで表示させてみます。
表示されているボタンをクリックして下さい。次のようにテキストが書き換えられます。
OperaやFireFoxで動作させるには子ノードのインデックス番号を次のように書き換える必要があります。(最初に「body」タグを持つノードを取得する部分は、「body」タグを持つノードの集合の中の何番目かであり空白ノードは元々含まれませんので0番目のままで結構です)。
function change(){
var node = document.getElementsByTagName("body");
node[0].childNodes[1].childNodes[1].childNodes[1].innerHTML = "変更しました";
}