2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@teru_dev

JavaScriptのDOM操作基本編・要素取得からスタイル変更・追加削除までを整理する

2
Posted at

1. はじめに

この記事では、JavaScriptを使ったDOM操作の基本を整理しています。
動画教材を見ながら手を動かして学んだ内容を、後から見返しやすいようにまとめました。

扱うトピックは以下の通りです。

  • イベントリスナーの実行タイミング
  • textContent を使ったテキストの取得・変更
  • classList を使ったクラスの追加・削除・切り替え
  • querySelector / querySelectorAll による要素の取得
  • createElement / appendChild / insertBefore / remove による要素の追加・削除
  • 属性・スタイルの操作

2. イベントリスナーの実行タイミング

イベントリスナーは「登録するだけ」で、中の処理はイベント発生時に初めて実行されるようです。
これを意識していないと、コードの実行順が思ったとおりにならないことがあると感じました。

2.1 実行順の確認

document.querySelector('button').addEventListener('click', () => {
  console.log('Clicked');
});

console.log('Hello');

出力結果（ページ読み込み直後）

Hello

出力結果（ボタンクリック後）

Clicked

解説
addEventListener はイベントの処理を「登録」しているだけです。
そのため、ページ読み込み時にはまず Hello が表示され、ボタンをクリックして初めて Clicked が表示されます。
上から順に実行されるように見えても、イベント内の処理はタイミングがずれる点に注意が必要です。

3. テキストの操作（textContent）

textContent を使うと、要素内のテキストを取得したり変更したりできるようです。
querySelector() で要素を取得してから操作するのが基本の流れだと理解しました。

3.1 テキストの変更

<p>Hello</p>
<button>OK</button>

const pElement = document.querySelector('p');

document.querySelector('button').addEventListener('click', () => {
  pElement.textContent = 'こんにちは';
});

出力結果
ボタンをクリックすると、Hello が こんにちは に変わります。

解説
querySelector() でHTML要素を取得し、.textContent にテキストを代入することで中身を書き換えられます。

3.2 テキストの取得

const pElement = document.querySelector('p');
const buttonElement = document.querySelector('button');

buttonElement.addEventListener('click', () => {
  pElement.textContent = buttonElement.textContent; // 'OK' に変わる
});

解説
.textContent は値の取得にも使えます。
この例ではボタンのテキスト（OK）を取得して、p 要素に代入しています。

4. クラスの操作（classList）

CSSでスタイルを定義しておき、JavaScriptで classList を使って動的に切り替えるのが基本的なやり方のようです。
直接 style を書き換えるよりも、クラスの着脱で管理する方がコードが整理しやすいと感じました。

4.1 クラスの追加・削除（add / remove）

.pink-bg    { background: pink; }
.red-border { border: 2px solid red; }
.green-color { color: green; }

const pElement = document.querySelector('p');

document.querySelector('button').addEventListener('click', () => {
  pElement.classList.add('pink-bg', 'red-border'); // 複数追加も可能
  pElement.classList.remove('green-color');
});

解説

  • classList.add('クラス名') でクラスを追加します。カンマ区切りで複数同時追加もできます
  • classList.remove('クラス名') でクラスを削除します
  • クラスセレクターの . は不要で、文字列のみ渡します

4.2 クラスのON/OFF切り替え（toggle / contains）

クリックのたびにスタイルを切り替えたい場合、toggle() を使うとシンプルに書けるようです。

// 条件分岐を使う書き方
buttonElement.addEventListener('click', () => {
  if (!pElement.classList.contains('pink-bg')) {
    pElement.classList.add('pink-bg');
  } else {
    pElement.classList.remove('pink-bg');
  }
});

// toggle を使うシンプルな書き方
buttonElement.addEventListener('click', () => {
  pElement.classList.toggle('pink-bg');
});

解説

  • classList.contains('クラス名') はクラスが付いていれば true、なければ false を返します
  • classList.toggle('クラス名') はクラスがなければ追加、あれば削除してくれます
  • 切り替え処理には toggle() を使うのが便利だと感じました

5. 要素の取得方法（querySelector / querySelectorAll）

querySelector と querySelectorAll の使い分けを整理します。
複数の要素をまとめて操作するときは querySelectorAll と反復処理の組み合わせが重要だと感じました。

5.1 querySelector と querySelectorAll の違い

<ul>
  <li class="target">Taro</li>
  <li id="second">Jiro</li>
  <li class="target">Saburo</li>
</ul>

// querySelector → 最初の1要素のみ取得
const firstLi = document.querySelector('li');

// querySelectorAll → 条件に一致する全要素を取得
const allLi = document.querySelectorAll('li');

解説
querySelector() は一致する最初の要素だけを返します。
複数の要素を取得したい場合は querySelectorAll() を使います。

5.2 複数要素への一括処理（forEach）

const liElements = document.querySelectorAll('li');

document.querySelector('button').addEventListener('click', () => {
  liElements.forEach((li) => {
    li.textContent = 'Changed!';
  });
});

出力結果
ボタンをクリックすると、すべての li のテキストが Changed! に変わります。

解説
querySelectorAll() の戻り値は配列のような構造（NodeList）で、forEach() を使って1要素ずつ処理できます。
インデックスで個別に指定することもできますが、要素数が多い場合は forEach() の方が便利です。

5.3 CSSセレクターを活用した取得

// クラス名で絞り込む
const targets = document.querySelectorAll('.target'); // Taro と Saburo

// id で取得する
const second = document.querySelector('#second'); // Jiro

解説

  • クラス指定は .クラス名、id指定は #id名 と書きます
  • 疑似クラスや結合子なども使えるため、古い取得方法（getElementById など）よりも柔軟です
  • 基本は querySelector 系を使えばよいと理解しました

6. 要素の追加・削除

DOMはノードのツリー構造（DOMツリー）で管理されていて、JavaScriptで要素を新たに作成・追加・削除できるようです。
appendChild() を中心に、追加・削除の基本を整理します。

6.1 要素の作成（createElement）

const liElement = document.createElement('li');
liElement.textContent = 'Hanako';

解説
document.createElement('タグ名') で新しい要素を作成できます。
作成した要素はオブジェクトなので、const で宣言しても .textContent などのプロパティは変更できます。

6.2 要素の追加（appendChild / insertBefore）

const ul = document.querySelector('ul');
const liElement = document.createElement('li');
liElement.textContent = 'Hanako';

// 末尾に追加
ul.appendChild(liElement);

// Jiro の前に追加
const jiro = document.querySelector('#second');
ul.insertBefore(liElement, jiro);

解説

  • appendChild() は親要素の最後の子として追加します
  • insertBefore(追加するNode, 参照Node) は参照Nodeの直前に追加します
  • よく使うのは appendChild() で、insertBefore() は必要なときに確認する形でよさそうです

6.3 要素の削除（remove）

const result = confirm('削除しますか？');
if (result) {
  document.querySelector('#second').remove();
}

解説
remove() で要素を削除できます。
confirm() はOKで true、キャンセルで false を返すため、ユーザー確認と組み合わせて使えます。

7. 属性とスタイルの操作

要素の属性やスタイルもJavaScriptから変更できることを学びました。
それぞれ書き方のルールがあるため整理しておきます。

7.1 属性の操作

const img = document.querySelector('img');
const a = document.querySelector('a');
const pElement = document.querySelector('p');
const button = document.querySelector('button');

// 基本の書き方
img.src = 'dog.png';
a.href = 'https://example.com';

// class は classList を使うのが実用的
// pElement.className = 'red-border pink-bg'; // 上書きになるため注意
pElement.classList.add('red-border');

// true / false で制御する属性
button.disabled = true;

解説
属性の変更は基本的に 要素.属性名 = 値 の形で書きます。
class はJavaScriptの予約語のため className を使う必要がありますが、上書きになるため classList.add() を使う方が実用的です。
disabled / checked / selected は true / false で制御します。

7.2 スタイルの操作

const pElement = document.querySelector('p');

document.querySelector('button').addEventListener('click', () => {
  // pElement.style = 'font-size: 24px'; // style全体が上書きされるため非推奨
  pElement.style.fontSize = '24px'; // 特定のプロパティだけ変更
});

解説
style.プロパティ名 = 値 の形で特定のスタイルだけ変更できます。
CSSの font-size のようにハイフンを含むプロパティ名は、fontSize のようにキャメルケースに変換します。
値は "24px" のように単位を含む文字列で指定します。
通常はCSSでスタイルを管理するのが基本で、JavaScriptでの操作は動的に変更が必要な場合に使うとよさそうです。

まとめ

今回学んだDOM操作の基本を振り返ります。

  • イベントリスナー内の処理はイベント発生時に実行される（登録とは別タイミング）
  • textContent で要素のテキストを取得・変更できる
  • classList.add() / remove() / toggle() / contains() でクラスを操作できる
  • querySelector は1要素、querySelectorAll は複数要素を取得し、CSSセレクターがそのまま使える
  • querySelectorAll の結果は forEach() で反復処理できる
  • createElement / appendChild / insertBefore / remove で要素の追加・削除ができる
  • 属性は 要素.属性名 = 値、スタイルは style.プロパティ名 = 値 で変更できる

次回はフォーム部品の値操作と各種イベント処理についてまとめる予定です。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?