- DOM 操作を網羅的に学びたい
DOM 操作とは、ウェブページの見た目や挙動をコントロールする手段のことです。
ここでは JavaScript を使った DOM 操作のうち、実務でよく使うものを中心にまとめました。
DOM操作を扱えるようになると、以下のようなことができます。
- 要素を取得する
- テキストなどの内容を変更する
- スタイルを変更する
- 新しい要素を追加・削除する
- イベントを追加する
普段よく目にするウェブページも、DOM 操作を行うことで簡単に見た目や挙動が制御できることがお分かりいただけると思います。
ぜひ本記事を「使いこなせるまでの逆引き辞書」的に傍に置いてお役立ていただければと思います。
分量が多いので、以下の目次より目的の項目にジャンプしてご覧ください。
要素取得系のテクニック
HTML には、要素ごとに id や class などが振られていることがほとんどです。
ここでは、これらの目印を頼りに要素を取得してくる方法をご紹介します。
document.getElementById()
id から要素を取得する場合、getElementById()を使います。
const targetElement = document.getElementById('id')id は同一ページ内で一つしか存在しないので、getElement”s” ではなく getElement であることに注意が必要です。
document.getElementsByClassName()
class から要素を取得する場合、getElementsByClassName()を使います。
const classElements = document.getElementsByClassName('class')class は同一ページ内で繰り返し使われます。
そのため、得られる要素は配列型に似た HTMLCollection というデータ型で得られます。
個々の要素へのアクセスは、インデックスで[0]のようにアクセスするか、for文でループします。
document.getElementsByTagName()
指定した HTML タグを持つすべての要素を取得する方法です。
const tagElements = document.getElementsByTagName('tagname')戻り値は HTMLCollection として得られます。
document.querySelector()
これまでご紹介したような特定の属性専用のメソッドではなく、万能的に色々なものをキーに要素を取得できるのがquerySelector()です。
// p タグを持つ要素を取得
let paragraph = document.querySelector("p");
// class 名が "my-class" の要素をを取得
let myElement = document.querySelector(".my-class");
// id が "my-id" の要素を取得
let uniqueElement = document.querySelector("#my-id");
// type=button の属性を持つ要素を取得
let button = document.querySelector("[type='button']");同じページ内に複数の要素が見つかった場合には、最初に見つかった要素が取得されます。
document.querySelectorAll()
ページ内で条件に合致したすべての要素を取得したい場合には、querySelectorAll()メソッドを使います。
// p タグを持つすべての要素を取得
let paragraphs = document.querySelectorAll("p");
// class 名が "my-class" の要素をすべてを取得
let myElements = document.querySelectorAll(".my-class");
// id が "my-id" の要素をすべて取得
let uniqueElement = document.querySelectorAll("#my-id");
// type=button の属性を持つすべての要素を取得
let buttons = document.querySelectorAll("[type='button']");要素書きかえ
ページ内の要素を書き換えることにより、以下のようなことができるようになります。
- テキストを変更する
- HTML タグごと変更する
- 属性を追加したり削除する
- スタイルを変更する
- クラスを変更する
- 要素ごと追加・削除する
後からページの内容を変更したい場合などに、特に有効です。
テキスト内容の変更
テキストの書き換えにはtextContentを使います。
// id が some-id の要素を取得する
let targetElement = document.querySelector("#some-id");
// 取得した要素のテキストを書き換える
targetElement.textContent = "新しいテキスト";HTMLの内容を変更する
対象の要素を HTML ごと変更したい場合は、innerHTMLプロパティを指定して置き換え後の HTML タグを指定します。
// id が some-id の要素を取得する
let targetElement = document.querySelector("#some-id");
// 取得した要素の HTML タグごと変更する
targetElement.innerHTML = "<strong>太字のテキスト</strong>";属性を変更する
属性の操作は、「設定する」「削除する」「取得する」の三つがあります。
let aTag = document.querySelector("a");
aTag.setAttribute("href", "https://www.example.com");
let hrefValue = aTag.getAttribute("href");
targetElement.removeAttribute("href");スタイルを変更する
CSS スタイルを変更するには、styleを指定します。
// some-id を id として持つ要素を取得する
let targetElement = document.querySelector("#some-id");
// 文字色を red にする
targetElement.style.color = "red";
// 背景色を blue にする
targetElement.style.backgroundColor = "blue";クラスを変更する
クラスは「追加」「削除」「あれば削除して、なければ追加する」という三つの操作があります。
// some-id を id として持つ要素を取得する
let targetElement = document.querySelector("#some-id");
// class に "new-class" を追加する
targetElement.classList.add("new-class");
// class から "old-class" を除去する
targetElement.classList.remove("old-class");
// class に "toggle-class" があれば削除し、なければ追加する
targetElement.classList.toggle("toggle-class");要素そのもののの作成と追加
新たに要素を作成したり、他の要素の子要素として追加することができます。
// 空の div 要素を作成
let newElement = document.createElement("div");
// div 要素内に "新しい要素" というテキストを追加する
newElement.textContent = "新しい要素";
// Body に作成した div 要素を追加する
document.body.appendChild(newElement);要素の削除
要素を削除するには、removeChild, removeを使います。
let parentElement = document.querySelector("#parent-id");
let childElement = document.querySelector("#child-id");
parentElement.removeChild(childElement);
// または
childElement.remove();イベントハンドリング系
マウスベント
マウスイベントには、主に次のようなものがあります。
- クリックされた時
- ダブルクリックされた時
- マウスボタンが押された時
- マウスボタンが離された時
- マウスが動いた時
- マウスが要素の上に移動した時
- マウスが要素から離れた時
クリックされた時
element.addEventListener('click', function() {
// クリック時の処理
});ダブルクリックされた時
element.addEventListener('dblclick', function() {
// ダブルクリック時の処理
});マウスボタンが押された時
element.addEventListener('mousedown', function() {
// マウスボタンが押された時の処理
});マウスボタンが離された時
element.addEventListener('mouseup', function() {
// マウスボタンが離された時の処理
});マウスが動いた時
element.addEventListener('mousemove', function() {
// マウスが動いた時の処理
});マウスが要素の上に移動した時
element.addEventListener('mouseover', function() {
// マウスが要素の上に移動した時の処理
});マウスが要素から離れた時
element.addEventListener('mouseout', function() {
// マウスが要素から離れた時の処理
});キーボードイベント
キーボードがトリガーになるイベントには、例えば次のようなものがあります。
- キーが押された時
- キーが離された時
- キーが押されている間、繰り返し発生させる
キーが押された時
document.addEventListener('keydown', function(event) {
// キーが押された時の処理
});キーが離された時
document.addEventListener('keyup', function(event) {
// キーが離された時の処理
});キーが押されている間、繰り返し発生させる
こちらは一部のブラウザでは非推奨になっているので、注意が必要です。
document.addEventListener('keypress', function(event) {
// キーが押されている間、繰り返し発生させたい処理
});フォームイベント
フォームイベントには次のようなものがあります。
- フォームが送信された時
- フォームの入力値が変更された時
- 要素がフォーカスされた時
- 要素がフォーカスを失った時
フォームが送信された時
form.addEventListener('submit', function(event) {
event.preventDefault();
// フォームが送信された時の処理
});フォームの入力ちが変更された時
form.addEventListener('change', function(event) {
event.preventDefault();
// フォームの入力値が変更された時の処理
});要素がフォーカスされた時
form.addEventListener('focus', function(event) {
event.preventDefault();
// 要素がフォーカスされた時の処理
});要素がフォーカスを失った時
form.addEventListener('blur', function(event) {
event.preventDefault();
// 要素がフォーカスを失った時の処理
});イベントの伝播を制御する
イベントの伝播を制御するメソッドは、主に次の二つがあります。
- イベントの伝播を止める
- イベントのデフォルトの振る舞いをキャンセルする
イベントの伝播を止める
イベントが現在の要素から親要素へと「伝播」（バブリングまたはキャプチャリング）するのを防ぐメソッドです。
element.addEventListener('click', function(event) {
event.stopPropagation();
// ここにその他の処理を記述
});イベントは通常、発生した要素から始まってドキュメントの根（通常はタグ）まで伝播します。
例えば、ボタン内の<span>要素をクリックすると、クリックイベントは<span>から始まり、外側の<button>、さらにその親要素へと順に伝播します。
stopPropagation()を使用すると、イベントは現在の要素で停止し、それ以上親要素へと伝播しません。
イベントのデフォルトの振る舞いをキャンセルする
preventDefault()は、イベントに対するブラウザのデフォルトの動作をキャンセルするメソッドです。
form.addEventListener('submit', function(event) {
event.preventDefault();
// ここにフォームの送信に関するカスタム処理を記述
});例えば、リンクをクリックしたときのページ遷移や、フォームの送信時のページリロードなどがあります。
このメソッドは、フォームの送信をAJAXで処理する場合や、リンクをクリックしても新しいページに遷移させたくない場合などに便利です。
preventDefault()を使用すると、これらのデフォルトの動作を阻止し、代わりにJavaScriptでカスタムの動作を実装できます。
その他のイベント
上記以外のイベントでよく使うものは以下の通りです。
- ページや画像が完全に読み込まれた時
- ブラウザのウィンドウサイズが変更された時
- スクロールが発生した時
ページや画像が完全に読み込まれた時
form.addEventListener('load', function(event) {
event.preventDefault();
// ページや画像が完全に読み込まれた時の処理
});ブラウザのウィンドウサイズが変更された時
form.addEventListener('resize', function(event) {
event.preventDefault();
// ブラウザのウィンドウサイズが変更された時の処理
});スクロールが発生した時
form.addEventListener('scroll', function(event) {
event.preventDefault();
// スクロールが発生した時の処理
});要素生成・削除系
ここでご紹介するメソッドを使用することで、HTML文書内の要素の生成、追加、削除、置換を行うことができます。
これらの操作はページの動的な更新に不可欠で、JavaScriptにおけるDOM操作の基本的な部分です。
要素の生成
要素の生成の主なものは、以下のようなものがあります。
- 新しい要素を生成する
- テキストノードを生成する
- 既存のノードを複製する
新しい要素を生成する
var newDiv = document.createElement('div');テキストノードを生成する
var newText = document.createTextNode('ここにテキスト');既存のノードを複製する
既存のノードを複製します。true を渡すと子孫ノードも一緒に複製されます。
var clonedElement = existingElement.cloneNode(true);要素の追加
要素の追加に関するメソッドは以下のようなものがあります。
- 対象の要素を親要素の最後の子として追加する
- 指定した小要素の前に新しい要素を挿入する
- 指定した位置にHTML文字列を挿入する
対象の要素を親要素の最後の子として追加する
parentElement.appendChild(newDiv);指定した小要素の前に新しい要素を挿入する
parentElement.insertBefore(newDiv, referenceElement);指定した位置にHTML文字列を挿入する
element.insertAdjacentHTML('beforeend', '<p>新しい段落</p>');要素の削除
要素の削除には、主に次の方法があります。
- 小要素を削除する
- 対象の要素を直接削除する
小要素を削除する
parentElement.removeChild(childElement);対象の要素を直接削除する
element.remove();要素の置換
小要素を別の要素で置き換えるには、replaceChild()を使います。
parentElement.replaceChild(newElement, oldElement);スタイル操作系
スタイルの設定
スタイルの設定方法には以下のようなものがあります。
- スタイルプロパティを直接設定する
- 複数のスタイルを一度に設定する
- クラスを追加、削除、切り替え、存在のチェック
スタイルプロパティを直接設定する
element.style.color = 'red'; element.style.marginTop = '20px';複数のスタイルを一度に設定する
element.style.cssText = 'color: red; margin-top: 20px;';クラスを追加、削除、切り替え、存在のチェック
// 追加
element.classList.add('my-class');
// 削除
element.classList.remove('my-class');
// 存在すれば削除、なければ追加
element.classList.toggle('my-class');
// 存在チェック
element.classList.contains('my-class'); // true or falseを返すスタイルの取得
現在の要素に適用されているすべてのスタイル（継承されたスタイルを含む）を取得します。
var style = window.getComputedStyle(element); var color = style.color;スタイルの適用と削除
- setAttribute:
style属性を使ってスタイルを設定します。javascriptCopy codeelement.setAttribute('style', 'color: red; margin-top: 20px;'); - removeAttribute:
style属性を削除して、すべてのインラインスタイルを削除します。javascriptCopy codeelement.removeAttribute('style');
これらの方法を使用することで、JavaScriptを使ってHTML要素のスタイルを柔軟に操作することができます。これにより、ページの動的な見た目の変更が可能になります。
属性操作系
以下のメソッドとプロパティを使用することで、DOM要素の属性を柔軟に操作することができます。これは、Webページの動的な振る舞いの制御に非常に役立ちます。
属性の追加・更新
- 指定した要素に新たな属性を追加する
- 特定の属性に対して直接プロパティとして設定する
指定した要素に新たな属性を追加する
指定した要素に新しい属性を追加するか、既存の属性の値を変更します。
element.setAttribute('id', 'newId');
element.setAttribute('class', 'className');特定の属性に対して直接プロパティとして設定する
特定の一般的な属性は、直接プロパティとして設定できます。
element.id = 'newId';
element.className = 'className';属性の削除
指定した要素から特定の属性を削除するには、removeAttribute()メソッドを利用します。
element.removeAttribute('id');属性の取得
指定した要素の特定の属性が持つ値を取得する
指定した要素の特定の属性の値を取得します。
var value = element.getAttribute('id');直接プロパティとして取得する
特定の一般的な属性は、直接プロパティとして取得できます。
var id = element.id;
var className = element.className;属性の存在確認
指定した要素が特定の属性を持っているかどうかを確認します。
var hasId = element.hasAttribute('id');属性の列挙
要素のすべての属性を列挙するために使用します。attributes は NamedNodeMap を返し、それぞれの属性ノードにアクセスできます。
var attrs = element.attributes;
for (var i = 0; i < attrs.length; i++) {
console.log(attrs[i].name + " = " + attrs[i].value);
}ウィンドウ操作系
以下の操作は、ドキュメントの構造や内容の変更、ウィンドウのサイズやスクロール位置の取得、新しいウィンドウの開閉など、ウェブページの動的な制御に不可欠です。
ビューポートの幅と高さを取得する
ビューポートの幅と高さを取得します。
const width = window.innerWidth;
const height = window.innerHeight;新しいウィンドウ、またはタブを開く
var newWindow = window.open('https://www.example.com');現在のウィンドウを閉じる
スクリプトで開かれたウィンドウに限りますが、現在のウィンドウを閉じることができます。
window.close();指定した位置にウィンドウをスクロールする
// 500ピクセル下にスクロール
window.scrollTo(0, 500);現在のURLを取得、新しいURLにナビゲートする
現在のURLを取得したり、新しいURLにナビゲートします。
var currentUrl = window.location.href;
window.location.href = 'https://www.example.com';タイマーを設定する
タイマーを設定します。
setTimeoutは一度だけ、setIntervalは繰り返し実行されます。
var timeoutId = window.setTimeout(function() {
/* 処理 */
}, 2000);
var intervalId = window.setInterval(function() {
/* 処理 */
}, 1000);タイマーをキャンセルする
タイマーをキャンセルします。
window.clearTimeout(timeoutId);
window.clearInterval(intervalId);フォーム操作系
これらの操作は、フォームとフォーム要素の操作、ユーザー入力の取得と処理、フォームの検証と送信に不可欠です。
JavaScriptを使用することで、これらのプロセスを動的に制御し、ユーザーエクスペリエンスを向上させることができます。
フォーム要素の取得
すべてのフォームを取得する
document.forms: ページ内のすべてのフォームを取得します。
var forms = document.forms; // HTMLCollection of forms特定のIDを持つフォームを取得する
getElementById: 特定のIDを持つフォーム要素を取得します。
var form = document.getElementById('formId');CSSセレクタを使ってフォームを取得する
querySelector: CSSセレクタを使ってフォーム要素を取得します。
var form = document.querySelector('#formId');入力要素の取得
フォーム内のすべての入力要素を取得する
form.elements: フォーム内のすべての入力要素を取得します。
var elements = form.elements; // HTMLFormControlsCollection特定の名前を持つ様子を取得する
getElementsByName: 特定の名前を持つ要素を取得します。
var inputs = document.getElementsByName('inputName'); // NodeListフォーム値の取得と設定
value プロパティ: 入力要素（input, select, textarea等）の値を取得または設定します。
var inputValue = inputElement.value; inputElement.value = '新しい値';フォームの送信とリセット
フォームをプログラム的に送信する
submit メソッド: フォームをプログラム的に送信します。
form.submit();フォームの全ての要素を初期値にリセットする
reset メソッド: フォームのすべての要素を初期値にリセットします。
form.reset();イベントリスナー
- addEventListener: フォームのイベント（例えば ‘submit’）に対してイベントリスナーを設定します。javascriptCopy code
form.addEventListener('submit', function(event) {
event.preventDefault(); // デフォルトの送信動作を防止
// 送信ロジック
});入力検証
- checkValidity / reportValidity: 入力要素やフォームの検証状態を確認します。
if (inputElement.checkValidity()) {
// 入力が有効
}
if (!form.reportValidity()) {
// フォーム内の少なくとも一つの入力が無効
}
コメント