DOMを使ってノードを取得する〜DOMの活用(1)

JavaScript

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

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

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

スポンサーリンク

ダイレクトアクセス

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

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

getElementByidメソッド

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

document.getElementById('ID値')

次の例ではボタンをクリックすると「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'));
}
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

JavaScript
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました