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]);

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