解 説

DOMを利用してドキュメントを操作してみましょう。
DOMを活用してドキュメントを操作するには大きく分けて2つの方法があります。

  1. ダイレクトアクセス ID値やクラス属性、タグ名で直接要素を指定する方法
  2. ノードウォーキング ノードのツリーを渡り歩いて目的の要素を指定する方法

ここではダイレクトアクセスについて学習します。

ダイレクトアクセス

dog_dom2
ダイレクトアクセスをするためには次のメソッドを使用します。IDやclass名または要素名を指定してダイレクトに要素にアクセスするものです。

  • ID名でアクセス getElementByidメソッド
  • タグ名でアクセス getElementByTagNameメソッド
  • クラス名でアクセス getElementByClassNameメソッド

getElementByidメソッド

使用方法 引数に指定したID値を持つ要素を取得

次の例ではボタンをクリックすると「Hello World!」を「ハロー・ワールド!」に換えます。
HTMLコード

JavaScriptコード

getElementByTagNameメソッド

使用方法 引数に指定したタグ名を持つ要素を取得

タグ名を指定した場合はID名と違い複数の要素が返ってきます。このメソッドの返り値は要素の集合が返ってきます。返ってきた値の集合のことをNodeListオブジェクトと呼んだりします。
NodeListオブジェクトは配列ではありませんので注意してください。参考サイト
このNodeListオブジェクトから利用できるメンバはlength(含まれる要素数)とitem(i)(i番目の要素を取得)があります。

次の例ではボタンをクリックするとa要素をアラートで表示しています。
HTMLコード

JavaScriptコード

getElementByClassNameメソッド

使用方法 引数に指定したクラス属性を持つ要素を取得

class属性をキーにして要素を取得できます。IE8は未対応ですから少し注意が必要です。
返り値はこれもclass属性を使用することから複数の値がNodeListオブジェクトして返されます。
次の例ではボタンをクリックするとclass属性がfirstのものをアラートで表示しています。
HTMLコード

JavaScriptコード