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

By | 2016年11月17日

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

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

class属性による要素の指定

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

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

CSS入門2(class属性のセレクタについて)

サンプルソースコード

以下の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つのタグの中身が書き換えられていることが確認できます。

DOMで操作するタグをclass属性で指定して書き換えた例

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タグの中身が書き換えられていることが確認できます。

DOMで操作するタグをid属性で指定した例

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)」への5件のフィードバック

  1. ピンバック: javascriptによるHTML要素の操作 – DOMの利用(1) | JoyPlotドキュメント

  2. ピンバック: マウスのクリックや重なりに反応して要素を書き換える DOMの利用(3) | JoyPlotドキュメント

  3. ピンバック: jQueryで特定の属性の指定やクリックイベントの設定 DOMの利用(9) | JoyPlotドキュメント

  4. ピンバック: [javascript]idではなくclassに対してスタイルを変更する方法 | INIM

  5. ピンバック: [JavaScript] id属性を設定したselect(セレクトボックス)の値を取得する - JoyPlotドキュメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*