普段はバックエンドの開発を担当しており、フロントエンドのことも多少知識として入れておきたいので、今回はDOM操作周りで勉強した内容をまとめる。jQuery（DOM操作を簡潔に記述できるJavaScriptライブラリ）は触れない。
対象読者
- JavaScript初心者
- DOM操作の概念を初めて学ぶ方
- Web開発に興味があり、JavaScriptを学習し始めた方
- Webページに動的な要素を追加したい方
- 静的なHTMLページに動きをつけたい方
- ユーザーインタラクティブな機能を実装したい方
DOMとは
DOMは、ブラウザがHTML文書を解析して生成するツリー状の構造。このツリー構造により、各要素（ノード）にアクセスし、操作することが可能になる。
例えば、以下のようなHTMLドキュメントがあるとする。
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="title">Hello World</h1>
<p>This is an example.</p>
</body>
</html>
このHTMLがブラウザで解析されると、以下のようなDOMツリーが生成される。
Document
│
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p
このツリー構造にアクセスすることで、ページの内容を動的に変更することができる。
なぜDOMを操作するのか
インタラクティブなWebページ
ボタンをクリックしたときに内容が変わる、入力した文字に応じて表示内容が変わるなど、ユーザーの操作に反応するWebページを作成できる。
動的なUI
JavaScriptライブラリやフレームワークの基盤として、より複雑なユーザーインターフェースを実現できる。
Webスクレイピング
Webページから特定の情報を抽出する際に利用できる。
DOMにアクセスする方法
DOMにアクセスするためには、documentオブジェクトを使う。documentは、現在表示されているウェブページ全体を表すオブジェクトで、そこから特定の要素を取得するためのさまざまなメソッドが提供されている。
IDで要素を取得する
getElementById()メソッドを使用すると、特定のIDを持つ要素を取得できる。（HTMLは先ほど書いたものを参照ください）
const title = document.getElementById('title');
console.log(title.textContent); // "Hello World"
クラス名で要素を取得する
getElementsByClassName()メソッドを使用すると、特定のクラスを持つ全ての要素を配列のようなオブジェクトで取得できる。
const paragraphs = document.getElementsByClassName('example');
console.log(paragraphs.length); // 要素の数
CSSセレクターで要素を取得する
querySelector()とquerySelectorAll()メソッドは、CSSセレクターを使って要素を取得する方法。querySelector()は最初に一致した要素を、querySelectorAll()は一致する全ての要素を取得する。
const firstParagraph = document.querySelector('p');
console.log(firstParagraph.textContent); // "This is an example."
DOM要素を操作する
取得したDOM要素に対して、内容や属性、スタイルを変更することができる。
内容を変更する
要素のテキスト内容を変更するには、textContentまたはinnerHTMLを使用する。
textContentはテキストのみを操作しますが、innerHTMLを使用するとHTMLも含めて内容を操作できる。
// テキスト内容を変更
title.textContent = 'Welcome to DOM Manipulation';
属性を変更する
要素の属性を変更するには、setAttribute()メソッドを使用する。
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
スタイルを変更する
要素のスタイルを変更するには、styleオブジェクトやclassListを使用する。
title.style.color = 'blue';
title.classList.add('highlight');
DOMイベントのハンドリング
ユーザーがウェブページと対話する際には、イベントを処理する必要がある。イベントとは、ユーザーの操作（クリックやキー入力など）に応じて発生するアクションのこと。
イベントリスナーを登録する
イベントリスナーは、特定のイベントが発生したときに実行される関数を登録するためのもの。addEventListener()メソッドを使って、任意のイベントを監視できる。
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('Button clicked!');
});
実プロジェクトでのDOM操作の例
フォームの操作
ユーザーが入力したデータを取得して、別の場所に表示する操作。
const input = document.querySelector('input');
const display = document.querySelector('#display');
input.addEventListener('input', () => {
display.textContent = input.value;
});
Todoリストの作成
シンプルなTodoリストを作成して、タスクを追加・削除する操作。
const taskList = document.querySelector('#taskList');
const addTaskButton = document.querySelector('#addTask');
addTaskButton.addEventListener('click', () => {
const newTask = document.createElement('li');
newTask.textContent = 'New Task';
taskList.appendChild(newTask);
});
// タスクの削除
taskList.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
taskList.removeChild(event.target);
}
});
まとめ
DOMの基本的な概念から、実際にDOMを操作する方法をまとめました。お役に立てれば幸いです。
参考
NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります
Discussion