ダイレクトアクセスによるノードの取得
ダイレクトアクセスでは、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>