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

JavaScriptのレガシーDOMメソッドでドキュメントのプロパティにアクセスする方法

JavaScriptのレガシーDOM（Legacy DOM）とは、W3Cによる標準化以前からブラウザに搭載されていた古典的なドキュメントオブジェクトモデルのことです。現在の主流はW3C DOMですが、document.titleやdocument.formsなどのレガシーなプロパティは今でも幅広いブラウザでサポートされており、短いコードでドキュメント情報を取得できる手軽な方法として活用されています。

よく使われるレガシーDOMのプロパティ

  • document.title … ページのタイトル（<title>タグの内容）を取得・設定できます。
  • document.URL … 現在表示しているドキュメントのURLを取得できます。
  • document.forms[0] … ドキュメント内の1番目のフォーム要素を参照できます。
  • document.forms[0].elements[1] … フォーム内の2番目の入力要素にアクセスできます。

サンプルコード

次のコードでは、ボタンをクリックするとドキュメントのタイトル・URL・最初のフォーム・フォーム内の2番目の要素が順番にアラートで表示されます。HTMLファイルとして保存してブラウザで開き、実際の動作を確認してみてください。

<html>
   <head>
      <title>ドキュメントのタイトル</title>
      <script>
         <!--
            function myFunc() {
               var ret = document.title;
               alert("ドキュメントのタイトル : " + ret);

               var ret = document.URL;
               alert("ドキュメントのURL : " + ret);

               var ret = document.forms[0];
               alert("最初のフォーム : " + ret);

               var ret = document.forms[0].elements[1];
               alert("2番目の要素 : " + ret);
            }
         //-->
      </script>
   </head>
   <body>
      <h1 id="title">これはメインタイトルです</h1>
      <p>次のボタンをクリックして結果を確認してください：</p>

      <form name="FirstForm">
         <input type="button" value="クリック" onclick="myFunc();" />
         <input type="button" value="キャンセル">
      </form>

      <form name="SecondForm">
         <input type="button" value="クリックしないでください"/>
      </form>
   </body>
</html>

コードのポイント

  • document.titleを使うと、<title>タグのテキストをそのまま文字列として取得できます。
  • document.URLは読み取り専用のプロパティで、現在のページの完全なURLを返します。
  • document.formsはフォームのコレクションであり、forms[0]のようにインデックス番号を指定して特定のフォームを取得します。
  • elements[1]のように指定することで、フォーム内の任意の位置にある入力要素へアクセスできます。

このように、レガシーDOMのプロパティを使えば、追加のライブラリなしでドキュメントの基本情報やフォーム要素に簡単にアクセスできます。ただし、より柔軟で標準的な要素操作を行いたい場合は、getElementById()やquerySelector()といったW3C DOMメソッドの利用もあわせて検討するとよいでしょう。

  1. JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

    JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。 注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  2. JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

    JavaScriptでオブジェクトのプロパティにアクセスする3つの方法 JavaScriptには、オブジェクトが持つプロパティ（キーと値のペア）を参照するための方法が主に3つあります。どれも同じ値を取得できますが、それぞれ特徴や向いている場面が異なるため、正しく使い分けられるとコードの可読性と保守性が大きく向上します。 ドット記法：object.property 角括弧記法：object[property] 分割代入：let {property} = object 1. ドット記法（object.property） 最もシンプルで読みやすい記法です。obj.a のようにピリオドでつなぐだけ