JavaScriptで要素を取得する

JavaScriptで要素を取得する方法をいくつか試してみます。

サンプルコード

id,class,タグ,nameから要素を取得してみます。

HTML

<div id="sample1">#sample1</div>
<ul>
	<li class="sample2">.sample2の1番目</li>
	<li class="sample2">.sample2の2番目</li>
	<li>classなし</li>
</ul>

<input type="checkbox" name="sample4" value="sample4-1">sample4-1
<input type="checkbox" name="sample4" value="sample4-2">sample4-2
<input type="checkbox" name="sample4" value="sample4-3">sample4-3

JavaScript

// idから要素を取得
var sample1 = document.getElementById('sample1');
console.log(sample1);

// classから要素を取得
var sample2 = document.getElementsByClassName('sample2');
console.log(sample2);
console.log(sample2[0]);

// タグから要素を取得
var sample3 = document.getElementsByTagName('li');
console.log(sample3);
console.log(sample3[2]);

// name属性から要素を取得
var sample4 = document.getElementsByName('sample4');
console.log(sample4);
console.log(sample4[0]);

// CSSセレクタでマッチする最初の要素を取得
var sample5 = document.querySelector('ul li.sample2');
console.log(sample5);

// CSSセレクタでマッチする全ての要素を取得
var sample6 = document.querySelectorAll('ul li.sample2');
console.log(sample6);
console.log(sample6[1]);

要素を取得するデモページ

getElementById(id名) idを指定して要素を取得する。
ページ内に1つしかないので「element」になる。
getElementsByClassName(class名) classを指定して要素を取得する。
ページ内に複数存在し得るので「elements」と複数形になる。
絞り込む場合、「getElementsByClassName(class名)[0]」のように添え字でDOM要素の何番目かを指定する。
対応ブラウザはIE9から。
getElementsByTagName(タグ名) タグを指定して要素を取得する。
ページ内に複数存在し得るので「elements」と複数形になる。
絞り込む場合、「getElementsByTagName(タグ名)[0]」のように添え字でDOM要素の何番目かを指定する。
getElementsByName(name属性) nameを指定して要素を取得する。
ページ内に複数存在し得るので「elements」と複数形になる。
絞り込む場合、「getElementsByName(name属性)[0]」のように添え字でDOM要素の何番目かを指定する。
querySelector(CSSセレクタ) CSSセレクタを指定してマッチする最初の要素を取得する。
IE8では一部未対応。
querySelectorAll(CSSセレクタ) CSSセレクタを指定してマッチする全ての要素を取得する。
絞り込む場合、「querySelectorAll(CSSセレクタ)[0]」のように添え字でDOM要素の何番目かを指定する。
IE8では一部未対応。

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

コメントが承認されるまで時間がかかります。

2021年4月
 123
45678910
11121314151617
18192021222324
252627282930