#034　フロントサイド（1）：DOM

2024年7月24日 07:23

DOMとは？

DOMというのは、ウェブページの内容を扱うための仕組みです。
少し難しい言葉で言うと「Document Object Model（ドキュメントオブジェクトモデル）」といいますが、簡単に言えば「ウェブページの設計図」のようなものです。

DOMを理解するために、家の間取り図をイメージします

家全体（HTML文書全体）
部屋（大きな要素。例：<div>や<section>）
家具（小さな要素。例：<p>や<img>）

DOMは、このような「間取り図」をコンピューターが理解できる形で表現したものです。これにより、JavaScriptを使って以下のようなことができます

新しい「家具」（要素）を追加する
「家具」の位置を変える
「部屋」の色（スタイル）を変更する
ユーザーが何かをクリックしたときに反応する

つまり、DOMがあることで、ウェブページを動的に変更したり、ユーザーの操作に反応したりすることができるのです。

DOMを使った簡単な例

この例では、ボタンをクリックすると、テキストが変更される簡単なウェブページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DOM操作の例</title>
</head>
<body>
    <h1 id="title">こんにちは、世界！</h1>
    <button id="changeButton">テキストを変更</button>

    <script>
        // ボタンがクリックされたときの動作を定義
        document.getElementById('changeButton').addEventListener('click', function() {
            // h1要素を取得
            const titleElement = document.getElementById('title');
            
            // テキストを変更
            titleElement.textContent = 'DOMって面白い！';
            
            // 色も変更してみる
            titleElement.style.color = 'blue';
        });
    </script>
</body>
</html>

この例について説明します

HTMLの部分：
- <h1>タグで見出しを作っています。id="title"をつけて、後でJavaScriptから参照できるようにしています。
- <button>タグでボタンを作っています。同様にid="changeButton"をつけています。
JavaScriptの部分：
- document.getElementById('changeButton')で、ボタン要素を取得しています。
- .addEventListener('click', function() { ... })で、ボタンがクリックされたときの動作を定義しています。
- クリックされると、document.getElementById('title')で見出し要素を取得し、その内容（textContent）と色（style.color）を変更しています。

この例を実行すると、最初は「こんにちは、世界！」と表示されていますが、ボタンをクリックすると「DOMって面白い！」という青い文字に変わります。

これが基本的なDOM操作の例です。ウェブページの要素を取得し、その内容やスタイルを JavaScript で動的に変更しています。

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。