📑

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter 4」＞「06 DOM」

2024/12/19に公開

DOM

目的：「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめ、Qiitaへアウトプットして理解力の向上に努める。


注意点


🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。

例）🤔<(感想、考察、疑問点など)

（参考書籍）
イラスト図解式 この一冊で全部わかるWeb技術の基本
（参考サイト）
Udemyメディア
MDN

 スクリプトからHTMLを操作する仕組み!

DOM（Document Object Model）… HTML、XML文書を"オブジェクト"として扱うための仕組み
マークアップ言語（HTML、CSSなど）をプログラミング言語からアクセスできるようにする
"DOMツリー"という枝分かれの構造をしている


サンプルコード（例１：DOM操作を行っているサンプルコード(chatGPTより生成)）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作のサンプル</title>
<style>
    .highlight {
        background-color: yellow;
    }
</style>
</head>
<body>
    <h1 id="main-heading">DOM操作のサンプル</h1>

    <p id="paragraph">この段落のテキストを変更します。</p>

    <button id="add-button">新しい要素を追加</button>

    <!-- JavaScriptファイルの読み込み -->
    <script src="script.js"></script>
</body>
</html>
script.js
// ボタン要素を取得
const addButton = document.getElementById('add-button');

// ボタンにクリックイベントを追加
addButton.addEventListener('click', function() {
    // 新しい要素を作成
    const newElement = document.createElement('p');
    newElement.textContent = '新しい段落が追加されました！';

    // 新しい要素を既存の段落の後に挿入
    const paragraph = document.getElementById('paragraph');
    paragraph.insertAdjacentElement('afterend', newElement);

    // 新しい要素にクラスを追加してスタイルを適用
    newElement.classList.add('highlight');
});
このサンプルコードでは、次のことが行われています：
id 属性を使用してHTML要素を識別し、JavaScriptで取得しています。
ボタン要素にクリックイベントを追加し、そのイベントが発生したときに新しい段落要素を作成しています。
createElement メソッドを使用して新しい要素を作成し、textContent を設定してその中身を定義しています。
insertAdjacentElement メソッドを使用して、既存の段落要素の後に新しい段落要素を挿入しています。
新しい要素に classList.add メソッドを使用してクラスを追加し、スタイルを適用しています（この例では highlight クラスが追加され、背景色が黄色になります）。
このようにして、JavaScriptを使用してHTMLの要素を動的に変更、追加、または削除することができます。

 概要昨今のほとんどのWebブラウザでDOMが使用可能となっている
一見接点が無いマークアップ言語とクライアントスクリプトがDOMというAPIを介してやり取りが可能となっている

DOMによって「マークアップ言語で生成されたWebページ上の内容を動的に読み取りや編集などの操作を可能」にしている
DOMはAPIである点を覚えておく

（画像１：DOMの立ち位置）

DOM は W3C によって標準化されており、また実装機能によって Level1 ~ Level3 にレベル分けされている

 対象となる文書を階層構造として扱うDOMでは対象とするWeb文書の各要素を抽出する際に、それらを階層構造と見なして扱う
DOMが階層構造と見なすそれら要素が"木のような根と枝分かれの構造"をしていることからDOMツリーと呼ぶ

DOMツリーが多くなればなるほど処理時間が多くかかってしまう点が難点
（サンプルコード１：入れ子構造のHTML）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOMツリーの例</title>
</head>
<body>
    <header>
        <h1>Welcome to our website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="home">
        <h2>Home</h2>
        <p>This is the homepage content.</p>
    </section>
    <section id="about">
        <h2>About Us</h2>
        <p>Learn more about our company.</p>
    </section>
    <section id="services">
        <h2>Our Services</h2>
        <ul>
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
        </ul>
    </section>
    <footer>
        <p>&copy; 2024 Company Name. All rights reserved.</p>
    </footer>
</body>
</html>
（サンプルコード２：DOMツリー）
Document
└── html
    ├── head
    │   ├── meta
    │   └── title
    ├── body
    │   ├── header
    │   │   ├── h1
    │   │   └── nav
    │   │       └── ul
    │   │           ├── li
    │   │           ├── li
    │   │           ├── li
    │   │           └── li
    │   ├── section#home
    │   │   ├── h2
    │   │   └── p
    │   ├── section#about
    │   │   ├── h2
    │   │   └── p
    │   └── section#services
    │       ├── h2
    │       └── ul
    │           ├── li
    │           ├── li
    │           └── li
    │
    └── footer
        └── p
（画像２：DOMツリー）

DOMツリーにおいて起点となる'html'要素を"根"
html直下に含まれる要素群をそれぞれ'葉'とみなして「木構造」としている
"html"要素を「ルート」
他の子要素を「ノード」

スクリプトからHTMLを操作する仕組み

概要

対象となる文書を階層構造として扱う

Discussion