JavaScriptのきほん「DOM要素の操作」

JavaScript

2025.04.21

JavaScript（JS）は、軽量でインタープリター型のプログラミング言語で、主にWebページをインタラクティブにするために使用される。

JavaScriptからHTMLへの入出力は、DOM（Document Object Model）というAPIを通して行う。

つまり、DOMは、Webページの内容をJavaScriptから操作できるようにするためのインターフェースを提供する。

DOMの基本構造

ドキュメントルート
DOMツリーの最上位に位置するルート要素。
通常、HTMLドキュメントでは <html> 要素がルートになる。
ELEMENT_NODE（要素ノード）
各HTMLタグは要素ノードとして表される。
例えば、<div>, <p>, <a> など。
TEXT_NODE（テキストノード）
要素内のテキストはテキストノードとして表される。
例えば、<p>Hello, World!</p> の “Hello, World!” 部分。
属性ノード
要素の属性は属性ノードとして表される。
例えば、<a href=”https://example.com”>Link</a> の href 属性。

DOM要素の操作

JavaScriptを使ってDOM要素を操作することで、Webページの内容やスタイルを動的に変更できる。
以下は、DOM要素を操作する基本的な方法である。

要素の取得
document.getElementById, document.querySelector などを使って要素を取得する。
要素の作成
document.createElement を使って新しい要素を作成する。
要素の追加
appendChild や insertBefore を使って要素を追加する。
要素の削除
removeChild を使って要素を削除する。
属性の操作
setAttribute や getAttribute を使って属性を操作する。

以下は、DOM要素を操作する簡単な例である。

<!DOCTYPE html>
<html lang="Ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // 新しい要素を作成
            const newElement = document.createElement("p");
            newElement.innerText = "新しい段落を追加します。";

            // 既存の要素に追加
            document.body.appendChild(newElement);
        });
    </script>
</head>
<body>
    <h1>ようこそJavaScriptへ</h1>
</body>
</html>