【JavaScript】JavaScriptでHTMLの要素を取得する方法

こんにちは（・∀・）

JavaScriptでHTMLの要素を取得して変更や参照する方法をご紹介します。

JavaScriptでHTMLの要素を取得する方法

JavaScriptでHTMLの要素を取得して変更や参照することができます。その場合、HTML内の要素の中から必要な要素を取得してオブジェクトとして取得する必要があります。

ということで、HTML内から要素を取得するためのメソッドをご紹介します。

HTMLの要素を取得するメソッドとプロパティ

HTMLから要素を取得するメソッドと位置から参照するプロパティです。

HTMLの要素を取得するメソッド

IDから取得する場合「getElement」それ以外は全て「getElements」と複数形表記となりますのでご注意ください。

ID以外のメソッドで要素を取得すると結果は配列となります。なのでそのうちのどれかを取得したい場合、何番目の要素かを指定する必要があります。

HTMLの位置から要素を取得するプロパティ

次のサンプルではそれぞれの方法で要素を取得してみました。

要素を取得するメソッド

<button id="button1" name="button1" class="button1">button1</button>
<button id="button2" name="button2" class="button2">button2</button>
<button id="button3" name="button3" class="button3">button3</button>
<button id="button4" name="button4" class="button4">button4</button>
<script>
document.getElementById('button1').onclick = function hoge1(){
alert("Id名で取得しました");
}
document.getElementsByTagName('button')[1].onclick = function hoge2(){
alert("Tag名で取得しました");
}
document.getElementsByClassName('button3')[0].onclick = function hoge3(){
alert("Class名で取得しました");
}
document.getElementsByName('button4')[0].onclick = function hoge4(){
alert("Name属性で取得しました");
}
</script>

Result

IEではClass名で要素の取得ができません。その他のブラウザではname名から参照できなかったり、位置から参照することができなかったりします。なのでID名やタグ名(IEを気にしなくてもいいのであればClass名)から要素を取得する方法を選択することをオススメします。

関連リンク

JavaScript入門
jQuery入門