Home > ダイレクトアクセスによるノードの取得

ダイレクトアクセスによるノードの取得

ダイレクトアクセスでは、IDやタグなどを直接指定して目的の要素を取得します。

getElementByIdメソッド

getElementByIdメソッドではIDを指定して要素を取得します。


		document.getElementById('ID名')

以下のサンプルではインプットボックスの値をIDを指定して取得しています。


		<script type="text/javascript">
function btn_click(){
	var obj = document.getElementById('input_1');
	if(obj.value != ""){
		window.alert(obj.value);
	}
}
</script>

<form action="#">
入力値：<input type="text" id="input_1" value="ABCDEFGHIJK">
<input type="button" value="実行" onclick='btn_click()'>
</form>

getElementsByTagNameメソッド

getElementsByTagNameメソッドではタグ名を指定して要素を取得します。


		document.getElementsByTagName('TAG名')

以下のサンプルではページのアンカータグをすべて取得してURLアドレスを表示します。


		<script type="text/javascript">
function btn_click(){
	var list = [];
	var obj = document.getElementsByTagName('a');
	for (var i = 0 ; i < obj.length ; i++){
		list.push(obj.item(i).href);
	}
	window.alert(list.join('\n'));
}
</script>

<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo</a><br />
<a href="http://www.google.co.jp/" target="_blank">Google</a><br />
<a href="http://www.msn.co.jp/" target="_blank">MSN</a>
<form action="#">
<input type="button" value="実行" onclick='btn_click()'>
</form>

以下のサンプルではページのパラグラフタグをすべて取得して内容を表示します。


		<script type="text/javascript">
function btn_click(){
	var list = [];
	var obj = document.getElementsByTagName('p');
	for (var i = 0 ; i < obj.length ; i++){
		list.push(obj.item(i).innerHTML);
	}
	window.alert(list.join('\n'));
}
</script>

<p>Yahoo!!</p>
<p>Google</p>
<p>MSN</p>
<form action="#">
<input type="button" value="実行" onclick='btn_click()'>
</form>

getElementsByClassNameメソッド

getElementsByClassNameメソッドではクラス名を指定して要素を取得します。


		document.getElementsByClassName('クラス名')

以下のサンプルではクラス名に合致したアンカータグをすべて取得してURLアドレスを表示します。


		<script type="text/javascript">
//
//	IE8では動作しません
//
function btn_click(){
	var list = [];
	var obj = document.getElementsByClassName('g');
	for (var i = 0 ; i < obj.length ; i++){
		list.push(obj.item(i).href);
	}
	window.alert(list.join('\n'));
}
</script>

<a href="http://www.yahoo.co.jp/" class="g">Yahoo</a><br />
<a href="http://www.google.co.jp/" class="g">Google</a><br />
<a href="http://www.msn.co.jp/" target="_blank" class="b">MSN</a>
<form action="#">
<input type="button" value="実行" onclick='btn_click()'>
</form>