// 存在しないIDを指定した場合
const nonExistentElement = document.getElementById(‘non-existent’);
console.log(nonExistentElement); // null
“`

このメソッドは非常に高速であり、特定の要素をピンポイントで操作したい場合に最適です。

2.2 クラス名で要素を取得する: getElementsByClassName()

複数の要素に同じスタイルや振る舞いを適用したい場合、class属性が使われます。JavaScriptでは、このクラス名を使って複数の要素をまとめて取得できます。

• メソッド: document.getElementsByClassName(className)
• 引数: 取得したい要素のclass属性に含まれるクラス名の文字列（複数のクラス名を指定する場合はスペースで区切る）。
• 戻り値: 指定されたクラス名を持つ要素のHTMLCollection（ライブコレクション）を返します。該当する要素が存在しない場合は空のHTMLCollectionを返します。

HTMLCollectionは配列のようにインデックスでアクセスできますが、厳密には配列ではありません（配列のforEachなどは直接使えません）。しかし、forループやfor...ofループを使って要素を順番に処理できます。

使用例:

“`html

• 項目1
• 項目2
• 項目3

これはリスト項目ではありませんが、クラス名は同じです。

“`

“`javascript
// class=”item” の要素を全て取得
const items = document.getElementsByClassName(‘item’);

console.log(items); // HTMLCollectionが出力される (4つの要素が含まれる)
console.log(items.length); // 4

// コレクションの要素にアクセス
console.log(items[0].textContent); // “項目1”
console.log(items[1].textContent); // “項目2”

// 全ての要素をループ処理
for (let i = 0; i < items.length; i++) {
console.log(items[i].textContent);
}

// for…of ループも使用可能
for (const item of items) {
console.log(item.textContent);
}

// 複数のクラス名を指定する場合 (両方のクラスを持つ要素を取得)
const activeItems = document.getElementsByClassName(‘item active’);
console.log(activeItems.length); // 1
console.log(activeItems[0].textContent); // “項目2”
“`

getElementsByClassName()は、同じ特性を持つ複数の要素にまとめてアクセスしたい場合に便利です。

2.3 タグ名で要素を取得する: getElementsByTagName()

特定の種類の要素（例えば、全ての<p>タグ、全ての<a>タグなど）をまとめて取得したい場合に利用します。

• メソッド: document.getElementsByTagName(tagName)
• 引数: 取得したい要素のタグ名（例: ‘p’, ‘div’, ‘a’, ‘img’）。全ての要素を取得したい場合は '*' を指定します。
• 戻り値: 指定されたタグ名を持つ要素のHTMLCollection（ライブコレクション）を返します。該当する要素が存在しない場合は空のHTMLCollectionを返します。

getElementsByTagName()もgetElementsByClassName()と同様にHTMLCollectionを返します。

使用例:

“`html

最初の段落。

三番目の段落。

“`

“`javascript
// 全てのp要素を取得
const paragraphs = document.getElementsByTagName(‘p’);

console.log(paragraphs); // HTMLCollectionが出力される (3つのp要素が含まれる)
console.log(paragraphs.length); // 3

// 全ての要素を取得
const allElements = document.getElementsByTagName(‘*’);
console.log(allElements.length); // ページ内の全ての要素数
“`

このメソッドは、特定の種類の要素全体に対して操作を行いたい場合に役立ちます。

2.4 CSSセレクターで要素を取得する: querySelector()

CSSで要素を選択するのと同じ感覚で要素を取得できる、非常に柔軟なメソッドです。指定されたCSSセレクターにマッチする要素のうち、最初に見つかった要素を一つだけ返します。

• メソッド: document.querySelector(selector)
• 引数: 有効なCSSセレクター文字列（例: ‘#id’, ‘.class’, ‘tag’, ‘div > p’, ‘input[type=”text”]’）。
• 戻り値: 指定されたセレクターに最初にマッチしたElementオブジェクト。該当する要素が存在しない場合はnullを返します。

このメソッドは、単一の要素を取得したい場合に、getElementById以外の様々な条件で要素を指定できるため非常に便利です。

使用例:

“`html

ボタン
“`

“`javascript
// IDで取得 (getElementByIdと同じ結果)
const button = document.querySelector(‘#my-button’);
console.log(button.textContent); // “ボタン”

// クラス名で取得 (最初のマッチ)
const firstText = document.querySelector(‘.text’);
console.log(firstText.textContent); // “最初のテキスト。”

// 複雑なセレクター
const highlightedText = document.querySelector(‘.container .highlight’);
console.log(highlightedText.textContent); // “ハイライトされたテキスト。”

// 存在しないセレクター
const nonExistent = document.querySelector(‘.non-existent-class’);
console.log(nonExistent); // null
“`

querySelector()は、要素を特定するための条件がIDだけではない場合や、より簡潔に記述したい場合に強力な選択肢となります。

2.5 CSSセレクターで複数の要素を取得する: querySelectorAll()

querySelector()と同様にCSSセレクターを使用しますが、マッチする全ての要素を取得します。

• メソッド: document.querySelectorAll(selector)
• 引数: 有効なCSSセレクター文字列。
• 戻り値: 指定されたセレクターにマッチする要素のNodeList（スタティックコレクション）を返します。該当する要素が存在しない場合は空のNodeListを返します。

NodeListもHTMLCollectionと同様にインデックスでアクセスでき、forループやfor...ofループ、そして配列のforEach()メソッドも使用できます。

使用例:

“`html

“`

“`javascript
// 全てのspan要素を取得
const spans = document.querySelectorAll(‘span’);
console.log(spans.length); // 3

// 特定のクラス内のspan要素を全て取得
const listItems = document.querySelectorAll(‘.list span’);
console.log(listItems.length); // 3 (どちらのdiv内のspanも含まれる)

// NodeListの操作 (forEachが使える)
listItems.forEach(item => {
console.log(item.textContent);
});
“`

querySelectorAll()は、特定のパターンにマッチする複数の要素にまとめてアクセスしたい場合に非常に柔軟な方法を提供します。

2.6 HTMLCollection と NodeList の違い (ライブ vs. スタティック)

ここで、getElementsByClassName()やgetElementsByTagName()が返すHTMLCollectionと、querySelectorAll()が返すNodeListの重要な違いに触れておきます。

• HTMLCollection (ライブコレクション):

  • DOMの現在の状態を「ライブ」で反映します。つまり、コレクションを取得した後にDOMツリー内で要素が追加または削除されると、その変更が自動的にコレクションに反映されます。
  • 要素へのアクセスはインデックス ([i]) か item(i) メソッドで行います。
  • 基本的なループ (for, for...of) は使えますが、forEach, map, filterなどの配列メソッドは直接使えません（Array.from()などで配列に変換すれば使えます）。

• NodeList (スタティックコレクション):

  • コレクションを取得した時点でのDOMの状態のスナップショットです。コレクションを取得した後にDOMツリー内で要素が追加または削除されても、コレクションの内容は変化しません。
  • 要素へのアクセスはインデックス ([i]) か item(i) メソッドで行います。
  • 多くのNodeList実装ではforEachメソッドが利用可能です。

例:

“`html

“`

“`javascript
const liveCollection = document.getElementsByClassName(‘live-item’);
const staticCollection = document.querySelectorAll(‘.live-item’);

console.log(‘初期状態:’);
console.log(‘Live:’, liveCollection.length); // 1
console.log(‘Static:’, staticCollection.length); // 1

// 新しい要素を追加
const container = document.getElementById(‘container’);
const newElement = document.createElement(‘p’);
newElement.className = ‘live-item’;
newElement.textContent = ‘Live Item 2’;
container.appendChild(newElement);

console.log(‘要素追加後:’);
console.log(‘Live:’, liveCollection.length); // 2 (自動的に反映)
console.log(‘Static:’, staticCollection.length); // 1 (追加前の状態を保持)
“`

ほとんどの場合、querySelectorAll()が返すスタティックなNodeListの方が、コレクションを操作している最中にDOMが変更されても影響を受けないため、扱いやすいかもしれません。しかし、リアルタイムのDOMの状態を監視したい場合は、ライブコレクションが役立つこともあります。

取得方法のまとめ:

• idで一意な要素: getElementById() (最も高速)
• クラス名で複数の要素: getElementsByClassName() (ライブ)
• タグ名で複数の要素: getElementsByTagName() (ライブ)
• CSSセレクターで最初の要素: querySelector() (柔軟)
• CSSセレクターで複数の要素: querySelectorAll() (柔軟, スタティック)

これらのメソッドを状況に応じて使い分けることで、操作したいHTML要素を正確に取得できます。要素が取得できたら、次はその内容や属性を変更する方法を見ていきましょう。

第3章：要素の内容を変更する

要素を取得したら、その中身（テキストやHTML）を変更してみましょう。主に使われるのはtextContentとinnerHTMLというプロパティです。

3.1 テキスト内容の変更: textContent

要素とその全ての子孫要素に含まれる「テキスト」を取得または設定します。HTMLタグは全て無視され、プレーンテキストとして扱われます。

• プロパティ: element.textContent
• 取得: 要素内の全てのテキストコンテンツ（整形されていない生の値）を文字列として返します。
• 設定: 要素内の既存の子ノードを全て削除し、新しいテキストノードを作成してそのテキストを設定します。

特徴:

• セキュリティが高い: 設定する値にHTMLタグが含まれていても、それは単なる文字列として扱われるため、クロスサイトスクリプティング（XSS）攻撃のリスクが低い。
• パフォーマンスが良い: HTMLを解析する必要がないため、innerHTMLよりも一般的に高速です。

使用例:

“`html

“`

“`javascript
const greetingDiv = document.getElementById(‘greeting’);

// 現在のテキスト内容を取得
console.log(greetingDiv.textContent);
// 出力:
// Hello, World!
// (pタグやstrongタグは無視される)

// テキスト内容を変更
greetingDiv.textContent = ‘こんにちは、皆さん！’;

console.log(greetingDiv.innerHTML);
// 出力: こんにちは、皆さん！
// (内部のpタグやstrongタグは置き換えられる)

// HTMLタグを含む文字列を設定してみる (プレーンテキストとして扱われる)
greetingDiv.textContent = ‘これは太字ではありません。’;
console.log(greetingDiv.innerHTML);
// 出力: これは<strong>太字</strong>ではありません。
// (<strong>のようにエスケープされる)
“`

要素内のテキストだけを変更したい場合や、ユーザー入力などの信頼できない値を要素に表示させる場合は、textContentを使用するのが推奨されます。

3.2 HTML内容の変更: innerHTML

要素の内部のHTML構造全体を取得または設定します。設定する値にHTMLタグが含まれている場合、ブラウザはそのタグを解釈してDOM構造を再構築します。

• プロパティ: element.innerHTML
• 取得: 要素の開始タグと終了タグの間のHTMLコードを文字列として返します。
• 設定: 要素内の既存の子ノードを全て削除し、新しいHTML文字列を解析してDOM構造を作成し、その要素の新しい子として追加します。

特徴:

• 柔軟性が高い: テキストだけでなく、新しい要素や構造をまとめて挿入できます。
• セキュリティリスク: 設定する値に悪意のあるスクリプトタグ（例: <script>alert('XSS')</script>)が含まれている場合、それが実行される可能性があります。信頼できないソースからの値にinnerHTMLを使うのは避けるべきです。
• パフォーマンス: HTMLの解析が必要なため、textContentよりもコストがかかる場合があります。

使用例:

“`html

“`

“`javascript
const contentArea = document.getElementById(‘content-area’);

// 現在のHTML内容を取得
console.log(contentArea.innerHTML);
// 出力:
//
//

元のコンテンツ。

//

// HTML内容を変更 (新しいHTMLを挿入)
contentArea.innerHTML = ‘

新しい見出し

新しい段落。

‘;

console.log(contentArea.innerHTML);
// 出力:
//

新しい見出し

新しい段落。

// スクリプトタグを挿入してみる (危険な例！)
// 絶対に信頼できない入力値でこれを行わないこと！
contentArea.innerHTML = ‘‘;
// この場合、onerror属性のJavaScriptが実行される可能性があります。
“`

新しいHTML構造をまとめて要素内に挿入したい場合にはinnerHTMLが便利ですが、必ず信頼できるソースからの文字列にのみ使用する、あるいはユーザー入力などを挿入する際は十分にサニタイズ（無害化）するというセキュリティ上の注意が必要です。多くの場合は、後述するDOM要素の生成・追加メソッド (createElement, appendChildなど) を使う方が安全で推奨されます。

3.3 innerText について (補足)

innerTextというプロパティも存在し、textContentに似ています。しかし、innerTextはCSSによって要素が非表示になっているかなどを考慮し、ブラウザが実際に表示しているテキストのみを返します。また、テキスト整形（改行やスペース）の扱いもtextContentと異なります。

• textContent: 要素ツリー内の全てのテキストノードを連結したもの。非表示要素のテキストも含む。CSSの整形を考慮しない。
• innerText: 要素のレンダリングされたテキスト。非表示要素のテキストは含まない。CSSの整形（改行やスペースの扱い）を考慮する。パフォーマンスはtextContentより低い場合がある。

特別な理由がない限り、テキスト内容の取得・設定にはtextContentを使うのが一般的で推奨されています。

内容変更のまとめ:

• テキストのみを安全に変更: element.textContent = '新しいテキスト'
• HTML構造を含めて変更: element.innerHTML = '新しいHTML' (セキュリティに注意！)

これで要素の中身を変更する方法を学びました。次は、要素の属性（ID, クラス, 画像パスなど）を変更する方法です。

第4章：要素の属性を変更する

HTML要素の属性（id, class, src, href, styleなど）もJavaScriptで動的に変更できます。これにより、要素の見た目や振る舞いを細かく制御できます。

4.1 共通属性の直接アクセス

多くの標準的な属性は、要素オブジェクトのプロパティとして直接アクセスできます。

• element.id
• element.className
• element.src (for <img>, <script> etc.)
• element.href (for <a>, <link> etc.)
• element.value (for form elements like <input>, <textarea>, <select>)
• element.disabled (boolean for form elements)
• element.checked (boolean for checkbox/radio)
• など

これらのプロパティを使うと、属性の値の取得や設定が簡単に行えます。

使用例:

html
<img id="my-image" src="image1.png" alt="Image 1">
<a id="my-link" href="old-page.html">リンク</a>
<input type="text" id="my-input" value="初期値">

“`javascript
const myImage = document.getElementById(‘my-image’);
const myLink = document.getElementById(‘my-link’);
const myInput = document.getElementById(‘my-input’);

// 属性の値を取得
console.log(myImage.src); // 画像の完全なURL (ブラウザが解決したパス)
console.log(myImage.alt); // “Image 1”
console.log(myLink.href); // リンクの完全なURL
console.log(myInput.value); // “初期値”

// 属性の値を設定
myImage.src = ‘image2.png’; // 画像を変更
myImage.alt = ‘Image 2’; // altテキストを変更
myLink.href = ‘new-page.html’; // リンク先を変更
myInput.value = ‘新しい値’; // 入力欄の値を変更
“`

これらのプロパティを使うのは、対応する属性が標準的で頻繁に使用される場合に効率的です。

4.2 任意の属性を取得・設定・削除する: getAttribute, setAttribute, removeAttribute

上記のような直接アクセスできるプロパティがない属性（例えば、data-*属性や、あまり一般的でない属性）や、属性の存在そのものを操作したい場合には、汎用的な属性操作メソッドを使用します。

• element.getAttribute(attributeName):
  • 指定された属性の値を取得します。属性が存在しない場合はnullまたは空文字列を返します。
  • 引数: 取得したい属性名の文字列。
• element.setAttribute(attributeName, value):
  • 指定された属性の値を設定します。属性が既に存在する場合は上書きされ、存在しない場合は新しく追加されます。
  • 引数: 設定したい属性名の文字列、設定したい値の文字列。
• element.removeAttribute(attributeName):
  • 指定された属性を削除します。
  • 引数: 削除したい属性名の文字列。

使用例:

“`html

“`

“`javascript
const dataBox = document.getElementById(‘data-box’);

// 属性の値を取得
console.log(dataBox.getAttribute(‘id’)); // “data-box”
console.log(dataBox.getAttribute(‘data-info’)); // “secret”
console.log(dataBox.getAttribute(‘custom-attr’)); // “something”
console.log(dataBox.getAttribute(‘non-existent’)); // null

// 属性の値を設定 (変更・追加)
dataBox.setAttribute(‘data-info’, ‘public’); // 値を変更
dataBox.setAttribute(‘new-attr’, ‘added’); // 新しい属性を追加

console.log(dataBox.outerHTML);
// 出力例:

// 属性を削除
dataBox.removeAttribute(‘custom-attr’);
dataBox.removeAttribute(‘non-existent’); // 存在しない属性の削除はエラーにならない

console.log(dataBox.outerHTML);
// 出力例:

“`

getAttributeと直接プロパティでアクセスする方法には違いがあります。例えば、href属性の場合、getAttribute('href')はHTMLソースに書かれたそのままの値を返しますが、element.hrefはブラウザが解決した絶対URLを返します。多くの場合はプロパティでのアクセスの方が便利ですが、HTMLソース通りの値が必要な場合はgetAttributeを使います。

特にdata-*属性は、datasetプロパティを使ってもっと簡単にアクセスすることもできます (element.dataset.infoなど)。

4.3 CSSクラスの操作: classList

要素のclass属性は、複数のクラス名をスペース区切りで持ちうるため、文字列として直接操作するのは面倒でバグの元になりがちです (element.className = 'new-class'や、文字列操作による追加/削除など)。より安全で便利な方法として、classListプロパティを使用します。

element.classListは、要素のクラス名リストを管理するための便利なメソッド群を提供します。

• element.classList.add(className1, className2, ...):
  • 指定されたクラス名を要素に追加します。既にあるクラス名は重複して追加されません。
• element.classList.remove(className1, className2, ...):
  • 指定されたクラス名を要素から削除します。存在しないクラス名を指定してもエラーになりません。
• element.classList.toggle(className, force):
  • 指定されたクラス名が存在すれば削除し、存在しなければ追加します。第2引数forceにtrueを指定すると追加だけ、falseを指定すると削除だけを行います。
• element.classList.contains(className):
  • 指定されたクラス名が要素に存在するかどうかを真偽値で返します。
• element.classList.replace(oldClass, newClass):
  • 既存のクラス名を新しいクラス名に置き換えます。

使用例:

“`html
トグルボタン

“`

“`javascript
const toggleButton = document.getElementById(‘toggle-button’);
const statusMessage = document.getElementById(‘status-message’);

// クラスを追加
toggleButton.classList.add(‘active’);
console.log(toggleButton.className); // “button inactive active” (順序は保証されない)

// クラスを削除
toggleButton.classList.remove(‘inactive’);
console.log(toggleButton.className); // “button active”

// クラスをトグル (hiddenがあれば削除、なければ追加)
statusMessage.classList.toggle(‘hidden’); // hiddenが削除される
console.log(statusMessage.className); // “”

statusMessage.classList.toggle(‘hidden’); // hiddenが追加される
console.log(statusMessage.className); // “hidden”

// クラスの存在を確認
console.log(toggleButton.classList.contains(‘active’)); // true
console.log(statusMessage.classList.contains(‘visible’)); // false

// クラスを置き換え (存在すれば)
toggleButton.classList.replace(‘button’, ‘btn’);
console.log(toggleButton.className); // “btn active”
“`

CSSクラスの追加・削除は、要素のスタイルを動的に切り替える際によく使われるテクニックです。classListを使うことで、安全かつ簡潔にクラス名を操作できます。

4.4 インラインCSSスタイルの変更: style

要素の見た目をJavaScriptで直接変更したい場合、element.styleプロパティを使用します。これにより、HTMLのstyle属性に直接CSSプロパティを設定するのと同じ効果が得られます。

element.styleはCSSStyleDeclarationオブジェクトであり、CSSプロパティ名に対応するプロパティを持ちます。CSSプロパティ名がハイフンを含む場合（例: background-color）は、JavaScriptのプロパティ名ではキャメルケース（例: backgroundColor）に変換して使用します。

• プロパティ: element.style.cssPropertyName
• 取得: 設定されているインラインスタイルの値を文字列で取得します。
• 設定: インラインスタイルを設定します。

注意点:

• この方法で設定されるのはインラインスタイルです。CSSファイルや<style>タグで定義されたスタイルよりも優先されます。
• 多数のスタイルを変更する場合や、複雑なスタイルを適用する場合は、スタイルを定義したCSSクラスをclassListで切り替える方が、管理がしやすく効率的です。JavaScriptで直接スタイルを設定するのは、特定の瞬間的な変更（例: アニメーション中の位置変更）などに限定するのが一般的です。

使用例:

“`html

“`

“`javascript
const styledBox = document.getElementById(‘styled-box’);

// 現在のスタイルを取得
console.log(styledBox.style.width); // “100px”
console.log(styledBox.style.backgroundColor); // “lightblue”

// スタイルを変更
styledBox.style.backgroundColor = ‘salmon’; // 背景色を変更
styledBox.style.marginTop = ’20px’; // 新しいスタイルを追加
styledBox.style.border = ‘2px solid black’; // 複数のスタイルをまとめて設定

// スタイルを削除 (値を空文字列に設定)
styledBox.style.width = ”; // widthスタイルを削除 (インラインスタイルのみ)

console.log(styledBox.outerHTML);
// 出力例:

“`

element.styleは手軽にスタイルを変更できますが、大規模なアプリケーションではCSSクラスによる管理を優先すべきです。

属性変更のまとめ:

• 一般的な属性: 対応するプロパティ (id, src, valueなど) を直接使う。
• 任意の属性: getAttribute, setAttribute, removeAttribute を使う。data-*属性はdatasetも便利。
• CSSクラス: classList の add, remove, toggle, contains, replace を使う (推奨)。
• インラインスタイル: element.style.cssPropertyName を使う (一時的な変更や簡単な場合に限定)。

これで、要素の内容や属性を自由に変更できるようになりました。次は、新しい要素をページに追加したり、既存の要素を削除したりする方法を見ていきましょう。

第5章：新しい要素を作成・挿入する

既存の要素を変更するだけでなく、新しい要素を動的に作成し、DOMツリー内の任意の場所に挿入することもよく行われます。例えば、リストに新しい項目を追加したり、ユーザーのアクションに応じてモーダルダイアログを表示したりする場合などです。

新しい要素を作成し、ページに挿入するには、主に以下の手順を踏みます。
1. 新しい要素ノードを作成する。
2. 必要に応じて、作成した要素の内容や属性を設定する。
3. DOMツリー内の既存の親要素や参照要素を指定し、作成した要素を挿入する。

5.1 要素ノードの作成: document.createElement()

指定したタグ名を持つ新しい要素ノードを作成しますが、この時点ではまだDOMツリーには追加されていません。

• メソッド: document.createElement(tagName, options)
• 引数: 作成したい要素のタグ名の文字列（例: ‘div’, ‘p’, ‘span’, ‘li’）。オプション引数もありますが、通常は省略します。
• 戻り値: 作成された新しいElementオブジェクト。

使用例:

“`javascript
// 新しいdiv要素を作成
const newDiv = document.createElement(‘div’);

// 新しいp要素を作成
const newParagraph = document.createElement(‘p’);

// 新しい画像要素を作成
const newImage = document.createElement(‘img’);

console.log(newDiv); // 新しいdiv要素オブジェクトが出力される
console.log(newParagraph); // 新しいp要素オブジェクトが出力される
“`

作成された要素は、取得した既存の要素と同様にプロパティやメソッドを持ちます。

5.2 テキストノードの作成: document.createTextNode()

要素ノードの「内容」として、プレーンテキストを表すテキストノードを作成できます。

• メソッド: document.createTextNode(text)
• 引数: テキストノードに含めたい文字列。
• 戻り値: 作成された新しいTextオブジェクト。

使用例:

“`javascript
// テキストノードを作成
const textNode = document.createTextNode(‘これはテキストノードです。’);

console.log(textNode); // テキストノードオブジェクトが出力される
“`

作成したテキストノードは、要素ノードの子として追加することで、その要素のテキスト内容となります。

5.3 DOMツリーへの挿入

作成した要素ノードは、既存の要素の子として、あるいは既存の要素の兄弟として挿入することで、初めてページに表示されます。いくつかの挿入方法があります。

5.3.1 末尾の子として追加: parentElement.appendChild()

指定した親要素の最後の子として、作成した要素ノードを追加します。

• メソッド: parentElement.appendChild(childElement)
• 引数: 親要素に追加したい子要素ノード。
• 戻り値: 追加された子要素ノード。

使用例:

“`html

• 既存の項目

“`

“`javascript
const myList = document.getElementById(‘my-list’);

// 新しいリスト項目を作成
const newListItem = document.createElement(‘li’);
newListItem.textContent = ‘新しい項目’; // テキスト内容を設定

// リストの末尾に追加
myList.appendChild(newListItem);

console.log(myList.innerHTML);
// 出力:
//

“`

appendChildは最も基本的でよく使われる挿入方法です。

5.3.2 指定した要素の前に挿入: parentElement.insertBefore()

指定した親要素の子として、作成した要素ノードを、既存の参照要素の前に挿入します。

• メソッド: parentElement.insertBefore(newNode, referenceNode)
• 引数: 挿入したい新しいノード (newNode)、挿入位置の基準となる既存の子ノード (referenceNode)。referenceNodeにnullを指定すると、appendChildと同じように末尾に追加されます。
• 戻り値: 挿入された新しいノード。

使用例:

“`html

• 項目2
• 項目3

“`

“`javascript
const myListInsert = document.getElementById(‘my-list-insert’);
const itemTwo = document.getElementById(‘item-two’);

// 新しいリスト項目を作成
const newItemOne = document.createElement(‘li’);
newItemOne.textContent = ‘項目1’;

// 項目2の前に挿入
myListInsert.insertBefore(newItemOne, itemTwo);

console.log(myListInsert.innerHTML);
// 出力:
//

“`

既存の要素の前に挿入したい場合に便利です。

5.3.3 より柔軟な位置への挿入: element.insertAdjacentElement()

既存の要素に対して、その要素の外側や内側の特定の位置に別の要素を挿入できます。

• メソッド: element.insertAdjacentElement(position, element)
• 引数:
  • position: 挿入位置を指定する文字列。以下のいずれか。
    • 'beforebegin': element自身の直前（elementはelementの前の兄弟になる）。
    • 'afterbegin': element自身の開始タグ直後（elementの最初の子になる）。
    • 'beforeend': element自身の終了タグ直前（elementの最後の子になる）。これはappendChildとほぼ同じ。
    • 'afterend': element自身の直後（elementはelementの次の兄弟になる）。
  • element: 挿入したい要素ノード。
• 戻り値: 挿入された要素ノード。挿入に失敗した場合はnull。

使用例:

“`html

“`

“`javascript
const targetElement = document.getElementById(‘target-element’);

const beforeElement = document.createElement(‘p’);
beforeElement.textContent = ‘ターゲット要素の前に追加’;

const afterBeginElement = document.createElement(‘p’);
afterBeginElement.textContent = ‘ターゲット要素の最初の子として追加’;

const beforeEndElement = document.createElement(‘p’);
beforeEndElement.textContent = ‘ターゲット要素の最後の子として追加’;

const afterElement = document.createElement(‘p’);
afterElement.textContent = ‘ターゲット要素の後に追加’;

// 挿入実行
targetElement.insertAdjacentElement(‘beforebegin’, beforeElement);
targetElement.insertAdjacentElement(‘afterbegin’, afterBeginElement);
targetElement.insertAdjacentElement(‘beforeend’, beforeEndElement);
targetElement.insertAdjacentElement(‘afterend’, afterElement);

/*
結果のHTML構造:

ターゲット要素の前に追加

ターゲット要素の後に追加

*/
“`

insertAdjacentElementは、appendChildやinsertBeforeよりも柔軟な挿入位置を指定できるため便利です。同様にinsertAdjacentHTMLやinsertAdjacentTextというメソッドもあり、HTML文字列やテキスト文字列を直接指定の位置に挿入できます（innerHTMLと同様にセキュリティに注意が必要です）。

5.3.4 複数のノードを一度に追加 (モダンな方法): element.append(), element.prepend()

appendChildは一度に一つのノードしか追加できませんでしたが、新しいappend()およびprepend()メソッドを使うと、複数のノードやテキスト文字列を一度に、それぞれ子ノードの末尾または先頭に追加できます。

• element.append(nodeOrString1, nodeOrString2, ...):
  • 指定したノードや文字列を、その要素の最後の子として追加します。
• element.prepend(nodeOrString1, nodeOrString2, ...):
  • 指定したノードや文字列を、その要素の最初の子として追加します。

これらのメソッドは親要素を指定して使用します。

使用例:

“`html

“`

“`javascript
const testDiv = document.getElementById(‘append-prepend-test’);

const newNode1 = document.createElement(‘span’);
newNode1.textContent = ‘新しいSpan 1’;
const newNode2 = document.createElement(‘span’);
newNode2.textContent = ‘新しいSpan 2’;

// 末尾に複数のノードと文字列を追加
testDiv.append(‘末尾テキスト, ‘, newNode1, newNode2);

console.log(testDiv.innerHTML);
// 出力:
//

既存のコンテンツ

末尾テキスト, 新しいSpan 1新しいSpan 2

// 先頭に複数のノードと文字列を追加
const prependNode1 = document.createElement(‘strong’);
prependNode1.textContent = ‘先頭のStrong’;
testDiv.prepend(prependNode1, ‘先頭テキスト, ‘);

console.log(testDiv.innerHTML);
// 出力:
// 先頭のStrong先頭テキスト,

既存のコンテンツ

末尾テキスト, 新しいSpan 1新しいSpan 2
“`

append()とprepend()は、複数の要素やテキストを効率的に追加できるため、モダンなJavaScript開発でよく使われます。引数にテキスト文字列を渡した場合、自動的にテキストノードに変換されます。

5.3.5 自身を基準とした挿入 (モダンな方法): element.before(), element.after()

append()やprepend()が「親要素」に対して使うのに対し、before()やafter()は「自分自身」を基準にして、その要素の兄弟要素としてノードや文字列を挿入します。

• element.before(nodeOrString1, nodeOrString2, ...):
  • 指定したノードや文字列を、その要素自身の直前に挿入します。
• element.after(nodeOrString1, nodeOrString2, ...):
  • 指定したノードや文字列を、その要素自身の直後に挿入します。

これらのメソッドは、挿入したい要素ノード自身に対して使用します。

使用例:

“`html

“`

“`javascript
const targetSibling = document.getElementById(‘target-sibling’);

const beforeSibling = document.createElement(‘strong’);
beforeSibling.textContent = ‘ターゲットの前に追加’;

const afterSibling = document.createElement(‘em’);
afterSibling.textContent = ‘ターゲットの後に追加’;

// ターゲット要素の直前にノードと文字列を挿入
targetSibling.before(‘前のテキスト, ‘, beforeSibling);

// ターゲット要素の直後にノードと文字列を挿入
targetSibling.after(afterSibling, ‘, 後ろのテキスト’);

console.log(targetSibling.parentElement.innerHTML); // 親要素の中身を確認
/*
結果のHTML構造:

前のテキスト, ターゲットの前に追加ターゲットターゲットの後に追加, 後ろのテキスト

*/
“`

before()とafter()は、挿入したい要素の「隣」に要素を追加したい場合に直感的で便利です。

5.4 DocumentFragment (パフォーマンス向上テクニック)

多数の要素をまとめてDOMに追加する場合、要素を一つずつ追加するたびにブラウザはDOMツリーの変更を処理するため、パフォーマンスが悪化することがあります。このような場合に有効なテクニックとしてDocumentFragmentを使用できます。

DocumentFragmentは、DOMノードの一時的なコンテナとして機能します。要素を作成し、DocumentFragmentの中に構築しておき、最後にDocumentFragment全体を一度だけDOMツリーに追加します。DocumentFragment自身がDOMツリーに追加されることはなく、その子ノードだけが移動されます。

• 作成: document.createDocumentFragment()

使用例 (appendChildを繰り返す場合との比較):

“`html

“`

“`javascript
const listFragment = document.getElementById(‘fragment-test’);
const fragment = document.createDocumentFragment(); // DocumentFragmentを作成

// 大量のリスト項目を作成し、DocumentFragmentに追加
for (let i = 0; i < 1000; i++) {
const li = document.createElement(‘li’);
li.textContent = 項目 ${i + 1};
fragment.appendChild(li); // DocumentFragmentに追加 (この時点ではDOMに影響なし)
}

// DocumentFragment全体をDOMツリーに一度だけ追加
listFragment.appendChild(fragment); // DocumentFragmentの子ノードが一気に移動される

// ※ DocumentFragmentを使わない場合:
// for (let i = 0; i < 1000; i++) {
// const li = document.createElement(‘li’);
// li.textContent = 項目 ${i + 1};
// listFragment.appendChild(li); // 1000回DOM操作が発生する可能性がある
// }
“`

多数の要素を生成して追加するような処理では、DocumentFragmentを使用することでDOM操作の回数を減らし、パフォーマンスを向上させることができます。

要素作成・挿入のまとめ:

• 要素の作成: document.createElement('tagname')
• テキストの作成: document.createTextNode('text')
• 子要素の末尾に追加: parentElement.appendChild(childElement)
• 子要素の先頭または末尾に複数追加: parentElement.append(nodesOrStrings) / parentElement.prepend(nodesOrStrings) (モダン)
• 指定した子要素の前に挿入: parentElement.insertBefore(newNode, referenceNode)
• 自分自身の前後または内部の特定位置に挿入: element.insertAdjacentElement('position', element)
• 自分自身の兄弟として前後に追加: element.before(nodesOrStrings) / element.after(nodesOrStrings) (モダン)
• 多数の要素を効率的に追加: document.createDocumentFragment() を使用する。

これらのメソッドを組み合わせることで、ページの構造を自在に変化させることができます。

第6章：要素を削除する

動的に追加された要素や、不要になった要素をページから削除することもよく行われます。要素を削除する方法もいくつかあります。

6.1 親要素から子要素を削除する: parentElement.removeChild()

削除したい要素の親要素から、その子要素を削除します。

• メソッド: parentElement.removeChild(childElement)
• 引数: 削除したい子要素ノード。
• 戻り値: 削除された子要素ノード。

このメソッドを使うには、削除したい要素だけでなく、その親要素を取得しておく必要があります。

使用例:

“`html

• 項目A
• 項目B
• 項目C

“`

“`javascript
const removeList = document.getElementById(‘remove-list’);
const itemB = document.getElementById(‘item-b’);

// 親要素から子要素を削除
if (removeList && itemB) {
removeList.removeChild(itemB);
}

console.log(removeList.innerHTML);
// 出力:
//

“`

削除したい要素が親要素の中に確実に存在することを確認してから実行する必要があります。

6.2 要素自身を削除する (モダンな方法): element.remove()

削除したい要素自身に対して呼び出すことで、親要素からその要素を削除します。removeChildよりも直感的で簡潔な方法です。

• メソッド: element.remove()
• 引数: なし
• 戻り値: なし

このメソッドは、削除したい要素への参照さえあれば、親要素を別途取得する必要がないため便利です。

使用例:

“`html

“`

“`javascript
const paragraphToRemove = document.getElementById(‘paragraph-to-remove’);

// 要素自身を削除
if (paragraphToRemove) {
paragraphToRemove.remove();
}

const removeContainer = document.getElementById(‘remove-container’);
console.log(removeContainer.innerHTML);
// 出力:
//
“`

element.remove()は、特に親要素が簡単に取得できない場合や、削除したい要素自身への参照を持っている場合に非常に便利です。ほとんどの場合、removeChildよりもremoveを使用するのが推奨されます。

要素削除のまとめ:

• 親要素から子要素を削除: parentElement.removeChild(childElement)
• 要素自身を削除: element.remove() (推奨)

これで、HTML要素を自在に変更、追加、削除できるようになりました。これらの操作を、ユーザーのクリックなどのイベントに応じて実行する方法を見ていきましょう。

第7章：イベント処理と動的な変更の連動

JavaScriptによるHTML要素の動的な変更は、多くの場合、ユーザーの操作や特定の状況（ページの読み込み完了など）をトリガーとして実行されます。このトリガーとなるのが「イベント」です。JavaScriptは、要素に対してイベントが発生した際に特定の関数（イベントハンドラー、またはイベントリスナー）を実行するように設定できます。

7.1 イベントとは何か

イベントとは、ウェブページ上で発生する様々な出来事のことです。例：

• UIイベント: クリック (click), マウスオーバー (mouseover), キー入力 (keydown, keyup), フォーム送信 (submit), フォーカス (focus, blur), スクロール (scroll), リサイズ (resize) など
• 読み込みイベント: ページの読み込み完了 (load), DOMツリー構築完了 (DOMContentLoaded), 画像の読み込み完了 (load) など
• メディアイベント: 動画の再生 (play), 一時停止 (pause), 再生終了 (ended) など

JavaScriptは、これらのイベントが発生した際に、事前に登録しておいた処理を実行できます。

7.2 イベントリスナーの登録: addEventListener()

要素にイベントリスナーを登録する最も推奨される方法です。一つの要素に対して同じ種類のイベントリスナーを複数登録できます。

• メソッド: element.addEventListener(type, listener, options)
• 引数:
  • type: 監視したいイベントの種類の文字列（例: 'click', 'mouseover', 'submit'）。イベント名の前に'on'は不要です。
  • listener: イベントが発生した際に実行したい関数。この関数は、イベントに関する情報を含むEventオブジェクトを引数として受け取ります。
  • options (省略可): イベントリスナーのオプションを指定するオブジェクト。よく使われるのは capture (イベント伝播のどの段階で処理するか) や once (一度実行されたら自動的に解除するか) 、passive (preventDefault()を呼ばないことを保証するか) などです。通常は省略します。

使用例:

“`html
クリックしてください

まだクリックされていません。

“`

“`javascript
const myButtonEvent = document.getElementById(‘my-button-event’);
const statusParagraph = document.getElementById(‘status-paragraph’);

// ボタンにクリックイベントリスナーを登録
myButtonEvent.addEventListener(‘click’, function() {
// ボタンがクリックされたときに実行される関数
statusParagraph.textContent = ‘ボタンがクリックされました！’; // p要素の内容を変更
myButtonEvent.style.backgroundColor = ‘yellow’; // ボタンの背景色を変更
});

// 別途、別のクリックイベントリスナーを登録することも可能
myButtonEvent.addEventListener(‘click’, function() {
console.log(‘ボタンが二回クリックされたことになります (同じクリックで)’);
});
“`

複数のリスナーを登録できるため、機能ごとにイベント処理を分けて記述することが可能です。

7.3 イベントハンドラープロパティ (古い方法)

要素にはonclick, onmouseoverなどのイベントハンドラープロパティも存在します。

• プロパティ: element.onclick = function() { ... }

使用例:

javascript
// 上記の例で
// myButtonEvent.onclick = function() {
// statusParagraph.textContent = 'ボタンがクリックされました！ (onclick)';
// };
// myButtonEvent.onclick = function() { // これを記述すると上の処理は上書きされる
// console.log('こちらの処理だけが実行されます。');
// };

この方法の欠点は、一つのイベントタイプに対して一つのハンドラーしか設定できないことです。新しいハンドラーを設定すると、以前設定したハンドラーは上書きされてしまいます。そのため、特別な理由がない限りaddEventListenerを使用することが推奨されます。

7.4 イベントオブジェクト

イベントリスナー関数には、イベントに関する情報を含むEventオブジェクトが引数として渡されます。

Eventオブジェクトのよく使うプロパティ/メソッド:

• event.type: 発生したイベントの種類（例: 'click'）。
• event.target: イベントが最初に発生した要素（イベント伝播のターゲット）。
• event.currentTarget: イベントリスナーが登録されている要素。イベント伝播の際に役立ちます。
• event.preventDefault(): イベントに対するブラウザのデフォルトの動作をキャンセルします（例: <a>タグのクリックによるページ遷移を阻止、フォームの送信を阻止）。
• event.stopPropagation(): イベントの伝播（バブリング/キャプチャリング）を停止します。

使用例:

“`html
リンク

“`

“`javascript
const myLinkEvent = document.getElementById(‘my-link-event’);
const myForm = document.getElementById(‘my-form’);

// リンクのデフォルト動作(ページ遷移)を阻止
myLinkEvent.addEventListener(‘click’, function(event) {
console.log(‘リンクがクリックされましたが、ページ遷移はしません。’);
event.preventDefault(); // これがないとリンク先に飛んでしまう
console.log(‘イベントの種類:’, event.type); // click
console.log(‘イベントターゲット:’, event.target); //
console.log(‘カレントターゲット:’, event.currentTarget); //
});

// ここで入力値を取得したり、非同期処理を行う
const inputText = myForm.querySelector('input[type="text"]').value;
console.log('入力値:', inputText);

// 例えば、入力値をp要素に表示するなど動的な変更を行う
const resultParagraph = document.createElement('p');
resultParagraph.textContent = `入力された値: ${inputText}`;
myForm.appendChild(resultParagraph); // フォーム内に結果を追加

// ここに、getElementByIdなどの要素取得や、イベントリスナー登録などのコードを記述する
const myElement = document.getElementById('some-element');
if (myElement) {
    myElement.textContent = 'DOM準備OK!';
}

if (value === '') {
    errorElement.textContent = '入力してください！';
    errorElement.style.display = 'block';
    resultElement.textContent = ''; // エラー時は結果をクリア
} else {
    resultElement.textContent = '入力値: ' + value;
    errorElement.style.display = 'none'; // エラーメッセージを非表示
}

myButton.addEventListener('click', function(event) {
    event.preventDefault(); // デフォルト動作の阻止はイベントハンドラーで

    const inputValue = inputElement.value;
    updateDisplay(inputValue); // 実際の処理は別関数を呼び出す
});