getElemenとgetElementsの違い
javascriptでhtmlタグのドキュメント要素の値を取得するとき、はまってしまうことがあるので使い方を備忘録として残します。
getElemenとgetElementsの違い
getElemenとgetElementsの違いは単体か複数かです。表で比較してみました。
| 要素 | 値 |
|---|---|
| getElementById | 単体 |
| getElementsByClassName | 配列(リスト) |
| getElementsByName | 配列(リスト) |
| getElementsByTagName | 配列(リスト) |
サンプルコード
以下のhtmlコードを参照する場合。
|
1 2 3 4 |
<form action="#" name="search"> <input type="text" class="form-control" id='q' name="q" placeholder="あいうえお" maxlength="30" /> <button type="submit">検索</button> </form> |
getElementById
以下の方法でidの情報を取得できます。
|
1 |
console.log(document.getElementById('q')); |
getElementsByClassName
class要素は配列形式で取得できます。もし、getElementByIdと同じように単体形式で参照しようとするとundefinedが返されます。また、getElementsByNameとgetElementsByTagNameも同様に配列形式で値を取得できます。
|
1 2 |
wk = document.getElementsByTagName("div"); console.log(wk[0]); |
まとめ
ちょっとした違いですがはまると中々抜け出せないので記事にしてみました。ルールとして1ページに一度のみしか使えないidは単体で他は配列で取得されます。
(Visited 23 times, 1 visits today)
