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

W3C DOMメソッドを使ってドキュメントのプロパティにアクセスする方法

ドキュメントオブジェクトモデル（DOM）は、HTMLやXML文書をプログラムから操作するための仕組みです。MicrosoftのInternet Explorer 4で初めて独自のDOMが導入されましたが、IE 5以降のバージョンでは、W3C（World Wide Web Consortium）が標準化した基本的なDOM機能がサポートされるようになりました。

W3C DOMでは、document.getElementsByTagName() や document.getElementById() といったメソッドを使うことで、タグ名やIDを指定して要素にアクセスし、そのプロパティを読み取ったり操作したりできます。

サンプルコード

以下のコードを実行すると、W3C DOMメソッドを使ってドキュメントのプロパティ（タイトルや見出しの内容）にアクセスできます。ボタンをクリックすると、それぞれアラートで結果が表示されます。

<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 d="form2" name="SecondForm">
         <input type = "button" value = "Don't ClickMe"/>
      </form>
   </body>
</html>

コードの解説

このサンプルのポイントは以下のとおりです。

  • document.getElementsByTagName("title")：タグ名が「title」の要素をすべて取得します。戻り値は配列のようなリストになるため、ret[0] のようにインデックスを指定して先頭の要素にアクセスします。
  • document.getElementById("heading")：ID属性が「heading」である要素を1つだけ取得します。IDは文書内で一意であるため、最も効率的なアクセス方法の一つです。
  • innerHTML プロパティ：取得した要素の内部HTML（テキスト内容）を参照します。ここでは見出し「This is main title」が表示されます。

このように、W3C DOMの標準メソッドを利用すれば、ブラウザの種類に依存せず、ドキュメント内の任意の要素やプロパティに統一的な方法でアクセスできます。

  1. HTML DOM の fullscreenEnabled プロパティとは？使い方とサンプルコードを解説

    HTML DOM の fullscreenEnabled は、現在のドキュメントでフルスクリーンモードが利用可能かどうかを判定するためのプロパティです。戻り値の型は真偽値（boolean）で、読み取り専用となっています。フルスクリーンモードが利用可能な場合は true を返し、利用できない場合は false を返します。なお、ブラウザによって実装が異なるため、動作させるには各ブラウザに対応したベンダープレフィックスを使い分ける必要があります。構文（シンタックス）fullscreenEnabled の基本的な構文は以下の通りです。document.fullscreenEnabledサンプルコード

  2. OpenCVのダイレクトアクセス方式でピクセル値を変更する方法

    ダイレクトアクセス方式とは前回紹介した「at」メソッドでは、ピクセル値にアクセスする際に画像の型を指定する必要がありました。これよりもさらにシンプルな方法が「ダイレクトアクセス方式」です。この方式を使用する場合は、Mat<uchar>、Mat<Vec3b>、Mat<Vec2i> のような Mat テンプレート型を明示的に指定します。型を指定しておけば、配列のように image(行, 列) という形式で直接ピクセル値を読み書きできるため、コードが簡潔になります。サンプルコード以下のプログラムは、OpenCVでダイレクトアクセス方式を使ってピクセル値を変更する例