HTML へのアクセスとノードの扱い方

このページでは？

このページでは DOM を使った HTML へのアクセス方法とノードの扱い方を紹介します。

HTML 要素へのアクセス
- 特定の要素に直接アクセスする（getElementById）
- 同じタグ名の要素群にアクセスする(getElementsByTagName)
- BODY 要素にアクセスする（body）
ノードの扱い方
- ノードの種類（nodeName, nodeType, nodeValue）
- ノードの親子きょうだい関係（parentNode, childNodes, etc）
- ノードリスト

HTML 要素へのアクセス

ここでは HTML 要素へアクセスしてオブジェクトとして取得する方法を考えます。

特定の要素に直接アクセスする

アクセスしたい HTML 要素に id 属性で名前を付けると、この要素に直接アクセスすることができます。この要素をオブジェクトとして取得するには次のように記述します。この方法は目的の要素にアクセスするための最も簡単かつ確実な方法です。

document.getElementById("id名")

実際には次のようにしてアクセスします。

     *** BODY 要素内 ***

<DIV id="myid">サンプルテキスト</DIV>

     *** JavaScript 部分 ***

obj = document.getElementById("myid");

同じタグ名の要素群にアクセスする

同じタグ名のすべての要素ノードの配列（ノードリスト）を取得するには次のように記述します。ノードリストの説明および個々のノードにアクセスする方法はノードリストの項目も参照ください。※ 下記の書式の中にある obj はあるオブジェクト（document またはある要素オブジェクト）が格納されているとします。

obj.getElementsByTagName("タグ名")

例えば文書内の P要素のノードリストを取得し、その中で一番最初に現れるP要素にアクセスする場合は次のようになります。

     *** BODY 要素内 ***

<BODY>
<P>サンプル</P>
     .....

     *** JavaScript 部分 ***

obj = document.getElementsByTagName("P"); // P要素のノードリストを取得
p_0 = obj[0]; // 一番最初のP要素を取得

また、ある TABLE要素の中で一番最初に現れる TD要素にアクセスするには次のようになります。

     *** BODY 要素内 ***

<TABLE id="t1">
    <TR><TD>セル１</TD><TD>セル２</TD></TR>
    <TR><TD>セル３</TD><TD>セル４</TD></TR>
</TABLE>

     *** JavaScript 部分 ***

obj_t1 = document.getElementById("t1");
cell1 = obj_t1.getElementsByTagName("TD")[0];

BODY 要素にアクセスする

BODY 要素を取得するには次のように記述します。ただし、フレーム設定されたページの場合には一番外側の FRAMESET 要素が取得されます。

document.body

getElementsByTagName(...)を使用しても同様の記述が可能です。

x1 = document.getElementsByTagName("BODY")[0];
x2 = document.body;
       // x1とx2は同じ

ノードの扱い方

ここではオブジェクトとして取得したノードを扱うためのプロパティやメソッドを紹介します。※ 下記の書式の中にあるobj はあるノードオブジェクトが格納されているとします。ノードオブジェクトの取得方法については前節のHTML へのアクセスを参照ください。

ノードの種類

ノードの種類を特定するプロパティを紹介します。

nodeName

obj.nodeName

ノード名を参照します。例えばノードが要素ならばタグ名を、属性ならば属性名を、テキストやコメントならばそれぞれ「#text」、「#comment」を返します。

nodeType

obj.nodeType

ノード型を参照します。例えばノードが要素ならば「1」、属性ならば「2」、テキストならば「3」、コメントならば「8」のようなコード番号を返します。

nodeValue

obj.nodeValue
obj.nodeValue = "ノードの値"

ノードの値を参照または設定します。参照はノードが要素ならば null を、属性ならば属性値を、テキストやコメントならばその内容を返します。設定はノードがテキストや属性などの場合に限りノードの値を変更することができます。

■使用例

それでは実際の使用例を見てみましょう。※ 使用例の getElementById や firstChildについてはそれぞれの個所を参照ください。

     *** BODY 要素内 ***

<DIV id="myid">サンプルテキスト</DIV>

     *** JavaScript 部分 ***

obj = documenet.getElementById("myid"); // オブジェクト取得
x1 = obj.nodeName; // DIV
x2 = obj.nodeValue; // null
x3 = obj.nodeType; // 1
x4 = obj.firstChild.nodeName; // #text
x5 = obj.firstChild.nodeValue; // サンプルテキスト
x6 = obj.firstChild.nodeType; // 3
obj.firstChild.nodeValue = "設定も可能です。" // 値を設定

ノードの親子きょうだい関係

親・子・きょうだいの各ノードにアクセスする方法を紹介します。

親ノード

obj.parentNode

親ノードを参照します。なければ null を返します。

子ノード群

obj.childNodes

すべての子ノードを含むノードの配列（ノードリスト）を参照します。ノードリストの説明および個々の子ノードにアクセスする方法についてはノードリストの項目を参照ください。

最初の子ノード

obj.firstChild

最初の子ノードを参照します。なければ null を返します。obj.childNodes[0] と同じです。

最後の子ノード

obj.lastChild

最後の子ノードを参照します。なければ null を返します。

直前のノード

obj.previousSibling

直前にあるノードを参照します。なければ null を返します。

直後のノード

obj.nextSibling

直後にあるノードを参照します。なければ null を返します。

■使用例

それでは実際の使用例を見てみましょう。※ 改行や空白はないものとします。使用例の getElementById については上記を参照ください。

     *** BODY 要素 ***

<BODY>
    <H1>ひらがな</H1>
    <P id="myid">
        <B>あ</B>
        <I>い</I>
        うえお
    </P>
    <P>かきくけこ</P>
</BODY>

     *** JavaScript 部分 ***

obj=document.getElementById("myid"); // オブジェクト取得
x0 = obj.parentNode.nodeName; // BODY
x1 = obj.childNodes[0].nodeName; // B
x2 = obj.firstChild.nodeName; // B
x3 = obj.lastChild.nodeValue; // うえお
x4 = obj.previousSibling.nodeName; // H1
x5 = obj.nextSibling.firstChild.nodeValue; // かきくけこ

ノードリスト

childNodes や getElementsByTagName(...) などによって取得されるオブジェクトはノードの配列で、ノードが文書に現れる順に格納されています。このようなノードの配列を DOM ではノードリスト（NodeList）と言います。

ノードリストの内容は以下のようにして参照します。※ obj はあるノードリストが格納されているとします。

個々のノードにアクセス

obj.item(n)

ノードリストの個々のノードを取得します。下記は n 番目のノードを参照します。存在しなければ null を返します。n は0から始まる整数です。JavaScript では obj[n] のように記述することもできます。

ノード数を参照

obj.length

ノードの数を参照します。

■使用例

それでは実際の使用例を見てみましょう。※ 改行や空白はないものとします。使用例の getElementById については上記を参照ください。

     *** BODY 要素内 ***

<P id="myid">
    私は
    <EM>オーストラリア</EM>
    に行きたい。
</P>

     *** JavaScript 部分 ***

obj = document.getElementById("myid").childNodes; // ノードリスト
x1 = obj.length; // 3
x2 = obj[0].nodeValue; // 私は
x3 = obj.item(0).nodeValue; // 私は
x4 = obj[1].nodeName; // EM
x5 = obj[2].nodeValue; // に行きたい。

HTML へのアクセスとノードの扱い方

このページでは？

目次

nodeName

nodeType

nodeValue

■使用例

親ノード

子ノード群

最初の子ノード

最後の子ノード

直前のノード

直後のノード

■使用例

個々のノードにアクセス

ノード数を参照

■使用例