JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで使えるDOMの種類を徹底解説！レガシーDOM・W3C DOM・IE4 DOMの違い

JavaScriptでは、HTMLドキュメントの内容にアクセスしたり変更したりするために、複数の種類のDOM（Document Object Model）を利用できます。本記事では、代表的な3つのDOMの特徴と違いをわかりやすく解説します。

1. レガシーDOM（Legacy DOM）

レガシーDOMは、JavaScriptの初期バージョンで導入された最も古いモデルです。すべてのブラウザで広くサポートされているという大きな利点がありますが、アクセスできるのはフォーム、フォーム要素、画像など、ドキュメントのごく一部の重要な要素に限定されます。

2. W3C DOM

W3C DOMは、World Wide Web Consortium（W3C）によって標準化されたドキュメントオブジェクトモデルです。ドキュメント内のすべてのコンテンツへのアクセスと変更が可能で、現在のほぼすべてのモダンブラウザでサポートされています。現代のWeb開発においては、このW3C DOMが事実上の標準となっています。

3. IE4 DOM

IE4 DOMは、MicrosoftのInternet Explorer 4で独自に導入されたドキュメントオブジェクトモデルです。その後、IE5以降のバージョンでは、W3C DOMの主要な機能の多くがサポートされるようになりました。

サンプルコード：W3C DOMでドキュメントのプロパティにアクセスする

次の例は、W3C DOMのメソッドを使ってドキュメントのプロパティにアクセスする方法を示しています。ボタンをクリックすると、getElementsByTagName()でページタイトルを取得し、getElementById()で見出し要素の内容を取得してアラート表示します。

<html>
    <head>
        <title> Document Title </title>
        <script type="text/javascript">
            function myFunc() {
                var ret = document.getElementsByTagName("title");
                alert("Document Title : " + ret[0].text);
                var ret = document.getElementById("heading");
                alert(ret.innerHTML);
            }
        </script>
    </head>

    <body>
        <h1 id="heading">This is main title</h1>
        <p>Click the following to see the result:</p>
        <form id="form1" name="FirstForm">
            <input type="button" value="Click Me" onclick="myFunc();" />
            <input type="button" value="Cancel">
        </form>
        <form id="form2" name="SecondForm">
            <input type="button" value="Don't ClickMe" />
        </form>
    </body>
</html>

まとめ

現在のWeb開発では、すべてのドキュメントコンテンツに柔軟にアクセスできるW3C DOMを使用するのが一般的です。レガシーDOMやIE4 DOMは歴史的な経緯を持つモデルですが、ブラウザ間の互換性や標準化の流れを理解するうえで知っておくと役立ちます。

  1. JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

    JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。 DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応

  2. WiFiセキュリティを強化する鍵と暗号化方式の種類と正しい設定方法

    現代のテクノロジー時代において、ほとんどのユーザーは無線LAN接続対応のルーターを通じてインターネットにアクセスし、スマートフォンやパソコンからウェブを利用しています。しかし、WiFiの鍵や暗号化方式が初期設定のまま変更されていないと、許可されていない第三者がルーターに接続し、あなたの回線を勝手に使用してしまう可能性があります。WiFiネットワークのセキュリティを向上させたい方は、ぜひ本記事の手順を参考にしてください。 さらに近年では、ルーターのパスワードを抜き出すネットワーク攻撃も存在し、インターネット回線への不正アクセスを目的としたアプリケーションも数多く出回っています。とはいえ心配はい