class属性とid属性を利用したタグの操作 DOMの利用（2）

前回はDOMの概要と、javascript で DOM を利用して、タグ名を使った要素の書き換えを行いました。

今回は、DOMで操作する要素（タグ）をタグ名以外で指定する方法について紹介します。

class属性による要素の指定

タグが持つ class属性 の値を指定して、DOMで操作する要素を取得することができます。

class属性はCSSでの装飾を行う際によく指定する、すべてのタグに指定できる属性です。詳しくは以下の記事をご覧ください。

サンプルソースコード

以下のHTMLソースとスクリプトは、実際にclass属性で要素を指定してその中身を書き換えるサンプルです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>DOMで操作する要素をclass属性で指定</title>
</head>

<body>
	<h1 class="red">タイトルです</h1>
	<p>テスト文章です。</p>
	<p class="red">2つ目のテスト文章です。</p>
	<div>
		<p>他のタグに入っている3つ目のテスト文章です。</p>
	</div>
</body>

<script>

	// ページ内にある class属性 が red である要素を全て取得
	var redClass = document.getElementsByClassName("red");

	// 1番最初に登場する class属性 が red のタグの中身を書き換える
	redClass[0].innerHTML = "red1";

	// 2番目に登場する class属性 が red のタグの中身を書き換える
	redClass[1].innerHTML = "red2";

</script>

</html>

実行結果

class属性を red にした2つのタグの中身が書き換えられていることが確認できます。

class属性で指定するためのメソッド

class属性の値で要素を指定する場合は、以下のメソッドを使用します。

document.getElementsByClassName(class属性の値);

タグ名で要素を指定する場合のメソッドは getElementsByTagName でしたが、class属性の名前で指定する場合は getElementsByClassName です。

使い方は getElementsByTagName と同じです。

同じclass属性を持つタグが複数あった場合は、戻り値の配列に複数の要素が格納されるので、配列にインデックス番号を指定して書き換える対象を指定します。

...
// 1番最初に登場する class属性 が red のタグの中身を書き換える
redClass[0].innerHTML = "red1";

// 2番目に登場する class属性 が red のタグの中身を書き換える
redClass[1].innerHTML = "red2";
...

id属性による要素の指定

ページ内に一つしか存在しない要素につけられる id属性 で操作する要素を指定することもできます。

サンプルソースコード

以下のHTMLソースとスクリプトは、実際にid属性で要素を一つ指定してその中身を書き換えるサンプルです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>DOMで操作する要素をclass属性で指定</title>
</head>

<body>
	<h1 id="title">タイトルです</h1>
	<p>テスト文章です。</p>
	<p>2つ目のテスト文章です。</p>
	<div>
		<p>他のタグに入っている3つ目のテスト文章です。</p>
	</div>
</body>

<script>
	// id属性 で特定のタグを指定
	var title = document.getElementById("title");

	title.innerHTML = "id属性で指定して書き換え";

</script>

</html>

実行結果

id属性が title であるh1タグの中身が書き換えられていることが確認できます。

id属性で要素を指定するメソッド

操作するタグをid属性で指定する場合は以下のメソッドを使います。

document.getElementById(id属性の値);

id属性を使って要素を指定するこのメソッドは、今まで登場した2つのメソッドとは異なる点があります。

まず名前をよく見てみると、

getElementsByTagName（タグ名で指定）
getElementsByClassName（class名で指定）
getElementById（id名で指定）

idで指定するメソッドだけ Elements と複数形ではなく Element です。

これは、ページ内にid属性は一つしかないからです。（複数ある場合はHTMLの定義に違反しています）

したがって、このメソッドの戻り値は配列ではなく、指定したid属性を持つ要素そのものを指します。

title.innerHTML = "id属性で指定して書き換え"; // title[0] のようになっていないことに注意！

このメソッドの戻り値はただ一つの要素を返すため、配列のように title[0] のようにしてアクセスする必要はありません。

以上がclass属性やid属性を利用してDOMで操作する要素を取得する方法です。

基本的にDOMで操作する要素を指定するには、今まで紹介した3つのメソッドを使用します。

もっと動的にページを書き換える

DOMは動的にページを書き換えられると初回で説明しましたが、今まではページを読み込んだ瞬間に書き換えが完了してしまっていたので、あまり動的であることを感じられない例でした。

次回はより動的である、ボタンを押してテキストを書き換える例を紹介します。

class属性とid属性を利用したタグの操作 DOMの利用（2）

class属性による要素の指定

サンプルソースコード

実行結果

class属性で指定するためのメソッド

id属性による要素の指定

サンプルソースコード

実行結果

id属性で要素を指定するメソッド

もっと動的にページを書き換える