←
class属性とid属性
class属性とid属性を利用したタグの操作 DOMの利用（2）
By JoyPlot | 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つのタグの中身が書き換えられていることが確認できます。
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属性で指定する場合は以下のメソッドを使います。
1
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は動的にページを書き換えられると初回で説明しましたが、今まではページを読み込んだ瞬間に書き換えが完了してしまっていたので、あまり動的であることを感じられない例でした。
次回はより動的である、ボタンを押してテキストを書き換える例を紹介します。