5月更新・前月(4月)の人気記事トップ10 05/02/2023
- ( 02 ↑) 【Mac】MacにGoogle Driveをインストール
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 07 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 04 ↓) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【2022年7月】Mac画面解像度まとめ
- (圏外↑) 【GIMP】線を真っ直ぐ引く方法
- ( 08 ↓) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
【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 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名)から要素を取得する方法を選択することをオススメします。