【JavaScript】HTMLの操作~DOM操作の基本と要素取得~

JavaScript

JavaScriptを使ってHTMLを操作することで、Webページの内容を動的に変更したり、ユーザーの操作に応じてインタラクティブな機能を追加したりすることができます。このプロセスは「DOM操作」と呼ばれます。この記事では、DOM操作の基本パターンや具体的な例、典型的な処理の流れ、そして要素を取得するための方法について解説します。

DOM操作の基本パターンと作れるものの例

要素を追加・削除・入れ替える

JavaScriptを使うと、HTMLの要素を動的に追加したり、削除したり、入れ替えたりすることができます。これにより、ユーザーのアクションやアプリケーションの状態に応じてページの内容を変えることができます。

  • 要素の追加: 新しいHTML要素を作成し、DOMに追加することができます。
  • 要素の削除: DOMから特定の要素を削除することができます。
  • 要素の入れ替え: 既存の要素を別の場所に移動させたり、入れ替えたりすることができます。
// 要素を追加する
let newElement = document.createElement("p");
newElement.textContent = "新しい段落が追加されました。";
document.body.appendChild(newElement);

// 要素を削除する
let elementToRemove = document.getElementById("removeThis");
elementToRemove.remove();

// 要素を入れ替える
let firstElement = document.getElementById("first");
let secondElement = document.getElementById("second");
document.body.insertBefore(secondElement, firstElement);

要素のコンテンツを書き換える

JavaScriptを使うと、既存のHTML要素の内容(テキストやHTML)を変更することができます。これにより、リアルタイムでページのコンテンツを更新することが可能です。

let element = document.getElementById("content");
element.textContent = "新しいテキストに書き換えられました。";
element.innerHTML = "<strong>HTMLを含む新しいコンテンツです。</strong>";

要素の属性を操作する

要素の属性(例えば、srchrefaltclassなど)を動的に操作することで、画像やリンク、スタイルなどを変更することができます。

let image = document.getElementById("myImage");
image.src = "newImage.jpg"; // 画像のソースを変更

let link = document.getElementById("myLink");
link.href = "https://example.com"; // リンクのURLを変更

let button = document.getElementById("myButton");
button.classList.add("active"); // クラスを追加
button.classList.remove("inactive"); // クラスを削除

HTMLを書き換えない特殊な操作

JavaScriptでは、HTMLそのものを変更せずに、要素のスタイルを動的に変更したり、イベントを追加したりすることができます。これにより、ユーザーインタラクションに応じた動的な操作が可能です。

let element = document.getElementById("myElement");

// スタイルを変更
element.style.color = "blue";
element.style.backgroundColor = "lightgray";

// イベントリスナーを追加
element.addEventListener("click", function() {
    alert("この要素がクリックされました!");
});

典型的な処理の流れ

DOM操作の開始タイミングをセットする

DOM操作を行う際は、ページの全コンテンツが読み込まれた後に実行する必要があります。DOMContentLoadedイベントを使って、適切なタイミングで処理を開始します。

document.addEventListener("DOMContentLoaded", function() {
    // DOM操作をここで行う
});

操作対象となる要素を取得する

操作したい要素を取得するために、JavaScriptのメソッドを使います。これには、getElementByIdquerySelectorなどのメソッドが使用されます。

let element = document.getElementById("myElement"); // IDで取得

書き換える要素やコンテンツを用意する

新しい要素を作成したり、既存の要素の内容を変更する準備を行います。例えば、createElementメソッドを使って新しい要素を作成します。

let newParagraph = document.createElement("p");
newParagraph.textContent = "新しい段落を追加します。";

書き換える、または挿入する

最後に、取得した要素や作成したコンテンツを使って、DOMを実際に操作します。

document.body.appendChild(newParagraph); // 新しい段落を追加

要素を取得する

よく使う要素取得メソッド

JavaScriptには、HTML要素を取得するためのさまざまなメソッドが用意されています。

  • document.getElementById(id): 指定したIDを持つ要素を取得します。
  • document.getElementsByClassName(className): 指定したクラス名を持つすべての要素を取得します。
  • document.getElementsByTagName(tagName): 指定したタグ名を持つすべての要素を取得します。
  • document.querySelector(selector): CSSセレクタに一致する最初の要素を取得します。
  • document.querySelectorAll(selector): CSSセレクタに一致するすべての要素を取得します。

document.querySelector()

document.querySelector()は、指定したCSSセレクタに一致する最初の要素を取得します。クラス名、ID、タグ名、複雑なセレクタなどを使って、柔軟に要素を取得できます。

let element = document.querySelector(".myClass"); // クラス名がmyClassの最初の要素を取得
let button = document.querySelector("#submitButton"); // IDがsubmitButtonの要素を取得
let listItem = document.querySelector("ul li"); // ul内の最初のli要素を取得

document.querySelectorAll()

document.querySelectorAll()は、指定したCSSセレクタに一致するすべての要素をNodeListとして取得します。NodeListは配列のように扱うことができます。

let items = document.querySelectorAll(".item");
items.forEach(function(item) {
    console.log(item.textContent);
});

document.getElementById()

document.getElementById()は、指定したIDを持つ要素を取得します。HTMLドキュメント内で一意のIDを持つ要素を対象にするため、最も頻繁に使われるメソッドの一つです。

let header = document.getElementById("mainHeader");
header.textContent = "新しいヘッダーのタイトル";

documentオブジェクトで特定の要素を取得する

documentオブジェクトは、HTMLドキュメント全体を表します。これを使って、特定の要素を取得したり、操作したりできます。

let title = document.title; // ドキュメントのタイトルを取得
document.title = "新しいタイトル"; // ドキュメントのタイトルを変更

ある要素を基準に相対的な位置で要素を取得する

特定の要素を基準にして、その子要素や兄弟要素を取得することができます。

let container = document.querySelector(".container");
let firstChild = container.firstElementChild; // 最初の子要素を取得
let nextSibling = firstChild.nextElementSibling; // 次の兄弟要素を取得

要素が取得できなかった場合の対処方法

要素が取得できなかった場合、nullが返されます。これをチェックして、エラーを防ぐ処理を行います。

let element = document.getElementById("nonExistentElement");

if (element !== null) {
    // 要素が存在する場合の処理
    element.textContent = "存在します。";
} else {
    console.log("要素が見つかりませんでした。");
}

まとめ

JavaScriptを使ったDOM操作は、HTMLコンテンツを動的に操作するための強力な手段です。要素の追加・削除・入れ替え、属性やコンテンツの書き換え、スタイルの変更など、さまざまな操作が可能です。これらの基本的な操作を理解し、適切に活用することで、インタラクティブなWebアプリケーションを作成することができます。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

JavaScript
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました