JavaScript DOM操作完全ガイド：要素検索からイベント処理まで実践的な解説

DOM操作の基本概念

DOM（Document Object Model）操作は、JavaScriptがHTMLページと対話するための中核技術です。ページ要素の探索、コンテンツやスタイルの変更、ユーザーとのインタラクション処理など、すべてDOM操作に依存しています。この記事では、基礎から応用まで、JavaScriptによるDOM操作の重要な概念を体系的に解説します。

要素の検索方法

DOM要素を操作するには、まずJavaScriptで目的の要素を見つける必要があります。主要な検索メソッドを以下に示します。

実践例：要素検索の比較

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>要素検索のデモンストレーション</title>
</head>
<body>
    <div id="mainContainer">
        <p class="contentText">最初の段落</p>
        <p class="contentText">2番目の段落</p>
        <p class="specialText">特別な段落</p>
        <ol>
            <li>アイテム1</li>
            <li>アイテム2</li>
            <li>アイテム3</li>
        </ol>
    </div>

    <script>
        // IDによる検索（単一要素を返す）
        const containerElement = document.getElementById("mainContainer");
        console.log("IDで検索:", containerElement);

        // クラス名による検索（HTMLCollectionを返す）
        const textElements = document.getElementsByClassName("contentText");
        console.log("クラス名で検索:", textElements);
        console.log("最初の要素:", textElements[0]);

        // タグ名による検索（HTMLCollectionを返す）
        const paragraphElements = document.getElementsByTagName("p");
        console.log("タグ名で検索:", paragraphElements);

        // CSSセレクタによる検索（NodeListを返す）
        const listItems = document.querySelectorAll("ol li");
        console.log("CSSセレクタでリスト項目を検索:", listItems);

        const firstItem = document.querySelector("ol li:first-of-type");
        console.log("最初のリスト項目:", firstItem);
    </script>
</body>
</html>

検索メソッドの特徴

メソッド	戻り値	特徴	利用場面
`getElementById()`	単一要素	IDは一意、高速検索	一意な要素の検索
`getElementsByClassName()`	HTMLCollection	リアルタイム更新	複数の同クラス要素
`getElementsByTagName()`	HTMLCollection	タグベースの検索	特定タグの要素群
`querySelectorAll()`	NodeList	CSSセレクタ対応	複雑な条件での検索

コンテンツの操作

要素を見つけた後、最も一般的な操作はコンテンツの変更です。textContentとinnerHTMLはそれぞれ異なる用途に適しています。

実践例：コンテンツの変更

<div id="contentArea">元のテキスト</div>
<script>
const targetDiv = document.getElementById("contentArea");

// テキストのみを変更
targetDiv.textContent = "安全なテキスト変更";

// HTMLを含む変更
targetDiv.innerHTML = "<span style='color: blue;'>HTML形式のテキスト</span>";
</script>

重要な違い

textContent：HTMLタグを無視し、純粋なテキストとして扱う。XSS攻撃防止に効果的
innerHTML：HTMLタグを解釈してレンダリング。ユーザー入力からの設定は危険性あり

スタイルの変更

JavaScriptを使って要素のCSSスタイルを動的に変更できます。要素のstyleプロパティを使用します。

実践例：スタイル変更

<style>
.styledBox {
    padding: 15px;
    margin: 10px;
    border: 2px solid #ddd;
}
</style>

<div id="targetBox" class="styledBox">スタイル変更対象</div>
<button onclick="applyNewStyles()">スタイル変更</button>

<script>
function applyNewStyles() {
    const boxElement = document.getElementById("targetBox");
    
    boxElement.style.color = "#ff6b6b";
    boxElement.style.fontSize = "18px";
    boxElement.style.border = "3px dashed #4ecdc4";
    boxElement.style.backgroundColor = "#f8f9fa";
}
</script>

スタイル設定のポイント

CSSプロパティ名はキャメルケースに変換（例：background-color → backgroundColor）
単位が必要な場合は明示的に指定（例：px、%など）
インラインスタイルとして適用され、外部CSSより優先度が高い

イベント処理

ユーザーの操作に応じてJavaScriptを実行するためのイベント処理は、インタラクティブなWeb開発の核です。

マウスイベントの例

<div id="interactiveBox" style="padding: 25px; border: 1px solid #ccc; cursor: pointer;">クリックしてみて</div>

<script>
const interactiveElement = document.getElementById("interactiveBox");

interactiveElement.addEventListener("click", function() {
    this.style.backgroundColor = "#ffe6e6";
});

interactiveElement.addEventListener("mouseenter", function() {
    this.style.transform = "scale(1.05)";
});

interactiveElement.addEventListener("mouseleave", function() {
    this.style.transform = "scale(1)";
});
</script>

フォームイベントの例

<form id="dataForm">
    <input type="email" name="emailInput" required placeholder="メールアドレス">
    <button type="submit">送信</button>
</form>

<script>
const formElement = document.getElementById("dataForm");

formElement.addEventListener("submit", function(event) {
    event.preventDefault(); // ページリロードを防ぐ
    
    const emailValue = this.emailInput.value;
    
    if (!emailValue.includes("@")) {
        alert("有効なメールアドレスを入力してください");
        return;
    }
    
    alert("フォーム送信完了: " + emailValue);
});
</script>

ウィンドウイベントの例

<div id="dimensionDisplay">画面幅: <span id="widthValue">0</span>px</div>

<script>
const widthDisplay = document.getElementById("widthValue");

window.addEventListener("resize", function() {
    widthDisplay.textContent = window.innerWidth;
});

window.addEventListener("load", function() {
    console.log("ページ読み込み完了");
});
</script>

主なイベントタイプ

イベントカテゴリ	代表的なイベント	発生条件
マウスイベント	`click`, `dblclick`	クリック、ダブルクリック
	`mouseenter`, `mouseleave`	要素へのマウス進入・離脱
フォームイベント	`submit`, `input`	フォーム送信、入力変更
ウィンドウイベント	`load`, `resize`	ページ読み込み、サイズ変更

タグ: javascript dom-api event-handling web-development frontend

7月14日 00:16 投稿

異端開発室