DOMを使ってノードを取得する〜DOMの活用（1） | IT工房｜AI入門とWeb開発

DOMを利用してドキュメントを操作してみましょう。
DOMを活用してドキュメントを操作するには大きく分けて２つの方法があります。

ダイレクトアクセス　ID値やクラス属性、タグ名で直接要素を指定する方法
ノードウォーキング　ノードのツリーを渡り歩いて目的の要素を指定する方法

ここではダイレクトアクセスについて学習します。

ダイレクトアクセス

ダイレクトアクセスをするためには次のメソッドを使用します。IDやclass名または要素名を指定してダイレクトに要素にアクセスするものです。

ID名でアクセス　getElementByidメソッド
タグ名でアクセス　getElementByTagNameメソッド
クラス名でアクセス　getElementByClassNameメソッド

getElementByidメソッド

使用方法　引数に指定したID値を持つ要素を取得

document.getElementById('ID値')

DEMO

次の例ではボタンをクリックすると「Hello World!」を「ハロー・ワールド！」に換えます。
HTMLコード

<h1>Sample</h1>
<p id="jp">Hello World!</p>
<button onClick="btn_onclick()">Click</button>

JavaScriptコード

function btn_onclick() {
	var newword = document.getElementById('jp');
	newword.innerHTML = 'ハロー・ワールド！';
}

getElementByTagNameメソッド

使用方法　引数に指定したタグ名を持つ要素を取得

document.getElementByTagName('タグ名')

タグ名を指定した場合はID名と違い複数の要素が返ってきます。このメソッドの返り値は要素の集合が返ってきます。返ってきた値の集合のことをNodeListオブジェクトと呼んだりします。
NodeListオブジェクトは配列ではありませんので注意してください。参考サイト
このNodeListオブジェクトから利用できるメンバはlength（含まれる要素数）とitem(i)（i番目の要素を取得）があります。

次の例ではボタンをクリックするとa要素をアラートで表示しています。
HTMLコード

<ul>
    <li><a href="https://itstudio.co/2014/05/08/2648/">定点撮影で人などの障害物を消す</a></li>
    <li><a href="https://itstudio.co/2014/05/05/2630/">スクラッチ画</a></li>
    <li><a href="https://itstudio.co/2014/05/05/2620/">アートヒストリブラシを使った描画 </a></li>
</ul>

JavaScriptコード

window.onload = function() {
	var result = [];
	var list = document.getElementsByTagName('a');
	for(var i = 0; i < list.length; i++){
		result.push(list.item(i).href);
	}
	window.alert(result.join('\n'));
}

getElementByClassNameメソッド

使用方法　引数に指定したクラス属性を持つ要素を取得

document.getElementByClassName('class属性')

class属性をキーにして要素を取得できます。IE8は未対応ですから少し注意が必要です。
返り値はこれもclass属性を使用することから複数の値がNodeListオブジェクトして返されます。
次の例ではボタンをクリックするとclass属性がfirstのものをアラートで表示しています。
HTMLコード

<ul>
    <li><a href="https://itstudio.co/2014/05/08/2648/" class="first">定点撮影で人などの障害物を消す</a></li>
    <li><a href="https://itstudio.co/2014/05/05/2630/" class="first">スクラッチ画</a></li>
    <li><a href="https://itstudio.co/2014/05/05/2620/">アートヒストリブラシを使った描画 </a></li>
</ul>

JavaScriptコード

function btn_onclick3() {
  var result2 = [];
  var list2 = document.getElementsByClassName('first');
  for(var j = 0; j < list2.length; j++){
    result2.push(list2.item(j).href);
  }
  window.alert(result2.join('\n'));
}