JavaScript での要素の取得方法

JavaScript では、HTMLやXMLのためのAPIであるDOM(Document Object Model)を利用することで、ページ内に変更を加えることができます。

ページ内に変更を加える場合、まず変更したいHTML内の要素を参照してオブジェクトとして取得しなければなりません。

ここでは、要素を取得するためのメソッドと、位置から別の要素を参照するためのプロパティについて記述しておくことにします。

HTML内の要素への取得・参照方法

下記の document に対するメソッドと参照方法を組み合わせることで、HTML内のID等が設定されてない要素も取得することができます。

  1. メソッド
    ID名から取得
    document.getElementById('ID名')
    タグ名から取得
    document.getElementsByTagName('タグ名')
    Class名から取得
    document.getElementsByClassName('class名')
    name名から取得
    document.getElementsByName('name名')
  2. 位置から参照するためのプロパティ
    • 子要素 : .childNodes
    • 最初の子要素 : .firstChild
    • 最後の子要素 : .lastChild
    • 次の要素 : .nextSibling
    • 前の要素 : .previousSibling
    • 親要素 : .parentNode

ID名以外のメソッドから取得すると結果が配列になるので、そのうちの一つを取得する場合は [0] のように何番目かを指定する必要があります。

また、ID名以外のメソッドから取得する場合は、By の前に s が入るので忘れずに記述しましょう。

確認用サンプル

ということで、取得方法はいくつもあるのでためしに、ちょっとテストしてみました。

下のセレクトボックスを変更することで、右下の PAGE_TOP ボタンと同様の動作を行うリンクとその際に参照した値がボックスの下に表示されます。

例としての参照先は、id="top",class="test" を持っている h1 タグということになっています。また、「位置からの参照は、変化する部分からの位置で参照しています。

この部分が変化します。

変更してみると、IEでは「class名からの参照」ができず、他のブラウザでは「位置から参照」と「name名から参照」で要素を取得できていないはずです。

これは、ブラウザが未対応なメソッドだったり参照した値が違うため、リンクが表示されず取得できていないためです。

ブラウザ間による違い

  • getElementsByClassName はIE8以下では未対応。
  • 位置から参照すると、空白や改行もテキストとして要素扱いとなるが、IEでのみ省かれる。
  • name名で取得する場合、name属性の値から取得するが、IEではid属性も含んで取得される。

このような違いはありますが、getElementsByName は name属性さえ設定してあれば挙動は違いますがIE以外でも利用できますし、位置から参照する場合も、空白と改行を省く処理を行うことでIEと同様に扱うことはできます。

とはいえ、取得するだけならブラウザ間の違いのないID名やタグ名から参照する方が簡単なので、できる限りそちらを利用しましょう。

スポンサードリンク

inserted by FC2 system