menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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

  • Guide

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

こんにちは(・∀・)

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

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

JavaScriptでHTMLの要素を取得して変更や参照することができます。

その場合、HTML内の要素の中から必要な要素を取得してオブジェクトとして取得する必要があります。

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

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

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

HTMLの要素を取得するメソッド
ID名から取得
document.getElementById('ID名')
タグ名から取得
document.getElementsByTagName('Tag名')
Class名から取得
document.getElementsByClassName('Class名')
name名から取得
document.getElementsByName('Name属性')

 

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

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

HTMLの位置から要素を取得するプロパティ
親要素
.parentNode
子要素
.childNodes
最初の子要素
.firstChild
最後の子要素
.lastChild
前の要素
.previousSibling
次の要素
.nextSibling

 

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

要素を取得するメソッド

<button type="button" id="button1" name="button1" class="button1">button1</button>
<button type="button" id="button2" name="button2" class="button2">button2</button>
<button type="button" id="button3" name="button3" class="button3">button3</button>
<button type="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入門

  • カテゴリー:Guide