JavaScript

最終更新日：
公開日：

レシピ

HTML・DOM

JavaScriptでHTMLを操作する

JavaScriptからHTML要素にアクセスして、ページを動的に表示する方法を解説します。

この記事のポイント

  • HTMLの操作はDOM（Document Object Model）が重要
  • HTML要素は取得する以外に追加、編集、削除することができる
  • HTML要素の属性も編集、追加、削除することができる

目次

JavaScriptからHTMLを操作する

JavaScriptはdocumentオブジェクトのメソッドを使って、ページ上にあるHTML要素を取得したり、編集、新規追加、削除をすることができます。

DOM（Document Object Model）について

ページにあるHTML要素は、DOM（Document Object Model）というHTML要素をツリー状にしたイメージを使って参照することが可能です。
DOMはHTML要素の操作で非常に重要なため、簡単に紹介します。

例えば、次のようなソースコードを持ったページがあるとします。

HTMLコード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GRAYCODE JavaScript</title>
</head>
<body>
  <h1>JavaScriptレシピ</h1>
  <p id="p1" class="text_cat" name="text_type1">I like cat.</p>
  <p id="p2" class="text_cat" name="text_type1">Cat is so cute.</p>
  <p id="p3" class="text_cat" name="text_type1">My Cat i a pheasant.</p>
</body>
</html>

このページの各HTML要素をDOMに当てはめると、次のようなツリー状の構造として捉えることができます。
（HTMLコードの先頭にある「<!DOCTYPE html>はHTML文書の宣言部分であるため、DOMには含まれません。）

HTMLのDOMイメージ

html要素（<html lang=”ja”>）を起点として、その下にhead要素とbody要素が続きます。
さらにhead要素には続いて、2つのmeta要素と1つのtitle要素が続きます。
body要素についても、1つのh1要素と3つのp要素が続いています。
以上が、HTMLコードのDOMによる全体像になります。

HTML要素の関係性についても触れると、html要素から見てすぐ下に続くhead要素とbody要素は子要素（または子孫要素）と呼び、head要素とbody要素から見た場合はhtml要素を親要素と呼びます。

同様に、body要素から見たときにh1要素とp要素は子要素にあたり、反対にh1要素とp要素から見るとbody要素が親要素にあたります。
このように、DOMにおいてはHTML要素同士は必ず親子関係にあります。

ちなみに、html要素から見たh1要素とp要素は子孫要素にあたり、反対にh1要素とp要素から見たらhtml要素は親の親要素となります。

ここまで見てきた通り、JavaScriptではHTMLをツリー状態にした形で各要素を参照することができるようになっています。
この仕組みを使うと、例えばHTML中に複数のp要素がのように要素名が重複している場合でも特定の1つの要素だけをピンポイントで編集したりすることが可能になります。

HTML要素の取得

JavaScriptからHTML要素を参照したり、編集する方法を解説していきます。
ここでは解説用に、body要素に以下のHTMLコードを持つページに対して各種HTML要素の操作をしていきます。

コード例

<body>
  <h1>JavaScriptレシピ</h1>
  <p id="p1" class="text_cat" name="text_type1">I like cat.</p>
  <p id="p2" class="text_cat" name="text_type1">Cat is so cute.</p>
  <p id="p3" class="text_cat" name="text_type1">My Cat i a pheasant.</p>
  <form>
    <input type="text" id="form_name" class="form_element" value="test" placeholder="ここに名前を入力してください">
    <select>
      <option value="1">OP1</option>
      <option value="2">OP2</option>
      <option value="3">OP3</option>
      <option value="4" selected="selected">OP4</option>
      <option value="5">OP5</option>
    </select>
    <input type="submit" id="form_submit" class="form_element" value="送信">
  </form>
</body>

HTML要素を参照する

ページの中から特定のHTML要素を取得するときには、取得方法が異なる次の6つのメソッドを使用することができます。

メソッド名値
getElementByIdメソッド指定したid属性を持つHTML要素を取得する
getElementsByClassNameメソッド指定したclass属性を持つ全てのHTML要素を取得する
getElementsByNameメソッド指定したname属性を持つ全てのHTML要素を取得する
getElementsByTagNameメソッド指定した要素名を持つ全てのHTML要素を取得する
querySelectorメソッド指定したセレクタに一致するHTML要素のうち、先頭の1つだけを取得する
querySelectorAllメソッド指定したセレクタに一致する全てのHTML要素を取得する

以下の例は上記のメソッドを使ってHTML要素を取得し、textContentプロパティ（HTML要素内のテキスト）をconsole.logメソッドで出力します。

コード例

// パターン1：id属性で取得
var p_element = document.getElementById("p1");
console.log(p_element.textContent); // I like cat.


// パターン2：class属性で取得（全て取得）
var class_elements = document.getElementsByClassName("text_cat");
console.log(class_elements[2].textContent); // My Cat is a pheasant.


// パターン3：name属性で取得（全て取得）
var name_elements = document.getElementsByName("text_type1");
console.log(name_elements[1].textContent); // Cat is so cute.


// パターン4：要素名で取得（全て取得）
var elements = document.getElementsByTagName("p");
console.log(elements[2].textContent); // My Cat is a pheasant.


// パターン5：セレクターに一致する最初の要素だけ取得（要素名だけ指定）
var p_element = document.querySelector("p");
console.log(p_element.textContent); // I like cat.


// パターン6：セレクターに一致する最初の要素だけ取得（要素名 + クラス名で指定）
var p_element = document.querySelector("p.text_cat");
console.log(p_element.textContent); // I like cat.


// パターン7：セレクターに一致する最初の要素だけ取得（要素名 + 属性で指定）
var submit_element = document.querySelector("form input[type=submit]");
console.log(submit_element.value); // 送信


// パターン8：セレクターに一致する最初の要素だけ取得（要素名 + 属性で指定）
var select_element = document.querySelector("option[selected=selected]");
console.log(select_element.value); // 4


// パターン9：セレクターに一致する全ての要素を取得
var p_elements = document.querySelectorAll("p");
console.log(p_elements.length);

for(var i=0; i<p_elements.length; i++) {
  console.log(p_elements[i].textContent);
}
// 1:I like cat.
// 2:Cat is so cute.
// 3:My Cat is a pheasant.

id属性はページ中において一意になるというHTMLの仕様があるため、getElementByIdメソッドは取得するHTML要素は1つになります。

それ以外のHTML要素名、class属性、name属性を指定して該当する全てのHTML要素を取得するメソッドについては、複数のHTML要素を取得することがあります。
そのため、戻り値は配列形式になります。
また、メソッド名も「getElementsByClassNameメソッドElements」と複数形になるため注意してください。

セレクタを使ってHTML要素を取得するquerySelectorメソッドやquerySelectorAllメソッドは、CSSのセレクタと同じ形で取得したい要素を指定して取得することができます。
HTML要素の親子関係や属性による指定も可能です。
該当する要素を1つだけにしたいときはquerySelectorメソッド、複数ある場合に全てを取得したいときはquerySelectorAllメソッドを使います。

HTML要素の編集

HTML要素の編集では、編集したい内容に応じて以下の3つのプロパティやsetAttributeメソッドを使うことができます。

プロパティ名 & メソッド名値
textContentプロパティHTML要素内に指定したテキストを設定する
idプロパティid属性を指定したid名で上書きする。id属性を持たない場合は新規で追加する
classNameプロパティclass属性を代入したクラス名で上書きする。class属性を持たない場合は新規で追加する
setAttributeメソッド指定した属性と値を設定する。すでにある属性の場合は上書きを行い、ない場合は新規で追加する

以下の例はgetElementByIdメソッドでp要素を取得後、各プロパティへの値の代入やsetAttributeメソッドを使って情報を設定します。

コード例

// id属性でHTML要素を取得
var p_element = document.getElementById("p1");
console.log(p_element.textContent); // I like cat.

// p要素のテキストを編集
p_element.textContent = 'I love cats.';
console.log(p_element.textContent); // I love cats.

// id属性を編集
p_element.id = 'p_cat';

// class属性を編集
p_element.className = 'text_edited';

// id属性を編集
p_element.setAttribute( "name", "text_type2");
p_element.setAttribute( "rel", "nofollow");

console.log(p_element);
// <p id="p_cat" class="text_edited" name="text_type2" rel="nofollow">I love cats.</p>

HTML要素を新しく追加

HTML要素の追加はcreateElementメソッドを使用します。
以下の例は新しいp要素を作成し、ページに追加します。

コード例

var new_element = document.createElement("p");
new_element.textContent = '新しい要素を追加';

var p_element = document.getElementById("p1");
document.body.insertBefore(new_element, p_element);

createElementメソッドで新しい要素を作成してから、textContentプロパティに要素内のテキストを設定します。

その後、getElementByIdメソッドを使って「id=”p1″」を持つp要素を取得し、insertBeforeを使ってこの要素の直前の位置へ新しい要素を追加します。

上記の例ではテキストのみ設定していますが、編集のときと同様に各種プロパティやsetAttributeメソッドを使って任意で属性を設定することも可能です。

HTML要素を削除

HTML要素の削除にはremoveメソッドを使用します。
以下の例はgetElementByIdメソッドでp要素を取得後、そのまま要素を削除します。

コード例

// id属性でHTML要素を取得
var p_element = document.getElementById("p1");

// 要素を削除
p_element.remove();

子孫要素を持つHTML要素にremoveメソッドを実行すると、子孫要素も含めて削除します。

HTML要素の属性を編集・追加・削除

HTML要素の編集でも触れていますが、要素に設定された各属性は編集することができます。
以下の例では「p1」というid属性を持つp要素に対して、属性を変更した後にconsole.logメソッドで出力します。

コード例

// id属性で取得
var p_element = document.getElementById("p1");

// パターン1：id属性を編集
p_element.id = 'new_id'; 

// パターン2：属性を編集（ない場合は新しく追加）
p_element.setAttribute('id','text1');
p_element.setAttribute('title','text1');

// パターン3：属性を削除
p_element.removeAttribute('name');

// パターン4：class属性にクラス名を追加
p_element.classList.add('new_class');
p_element.classList.add('new_class2');

// パターン5：class属性から指定したクラス名のみ削除
p_element.classList.remove('new_class');

// パターン6：class属性を編集（上書き）
p_element.className = 'new_class3 new_class4';

console.log(p_element);
// <p id="text1" class="new_class3" title="text1">I like cat.</p>

全ての属性はsetAttributeメソッドから編集、追加が可能です。
また、属性の削除についてはremoveAttributeメソッドで行います。

id属性とclass属性についてはidプロパティやclassNameプロパティような独自のプロパティから編集することも可能になっています。

class属性は複数の値が設定される可能性もありますが、今までのクラス名を残したまま新しく追加するときは上記パターン4のようにclassList.addメソッドを使います。
反対に指定したクラス名のみ削除したいときはclassList.removeメソッドから行います。

もう1つのclassNameプロパティは今まで設定されていた値を残さずに一括編集するときに使います。
また、半角スペースでクラス名を区切ることで複数のクラス名を登録することができます。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

関連記事

前のページへ 一覧に戻る 次のページへ