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

HTML DOMのdoctypeプロパティとは？構文と使い方をわかりやすく解説

HTML DOMのdoctypeプロパティは、現在のHTML文書に関連付けられているDTD（Document Type Declaration：文書型宣言）を返します。このプロパティは読み取り専用であり、文書型の名前をDocumentTypeオブジェクトとして取得します。なお、対象の文書にDTDが指定されていない場合は、nullが返されます。

構文

doctypeプロパティの基本構文は以下のとおりです。

document.doctype

サンプルコード

それでは、doctypeプロパティを使用した具体例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>doctype property example</h1>
<button onclick="getDoctype()">GET DOCTYPE</button>
<p id="Sample"></p>
<script>
   function getDoctype() {
      var doc = document.doctype.name;
      document.getElementById("Sample").innerHTML ="The doctype for this HTML document is: "+doc;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのdoctypeプロパティとは？構文と使い方をわかりやすく解説

続いて、「GET DOCTYPE」ボタンをクリックすると、以下のように文書型宣言の名前が出力されます。

HTML DOMのdoctypeプロパティとは？構文と使い方をわかりやすく解説

コードの解説

まず、HTML文書の先頭でDTD（文書型定義）をHTMLとして宣言しています。これにより、ブラウザはこの文書を標準準拠のHTML文書として正しくレンダリングできるようになります。

<!DOCTYPE html>

次に、「GET DOCTYPE」と表示されるボタンを作成しています。このボタンがユーザーによってクリックされると、onclick属性を通じてgetDoctype()関数が呼び出されます。

<button onclick="getDoctype()">GET DOCTYPE</button>

getDoctype()関数の内部では、documentオブジェクトのdoctypeプロパティが持つnameの値を取得し、変数docに代入しています。その後、idが「Sample」である段落要素のinnerHTMLプロパティに結果のテキストを設定することで、画面上に文書型の名前を表示しています。

function getDoctype() {
   var doc = document.doctype.name;
   document.getElementById("Sample").innerHTML ="The doctype for this HTML document is: "+doc;
}

このように、doctypeプロパティを活用すれば、JavaScriptから現在の文書の文書型宣言を簡単に参照できます。Webページが想定どおりのモードで描画されているかを確認したい場合などに役立つ便利なプロパティです。

  1. HTML DOMのdocumentElementプロパティとは？構文と使い方をわかりやすく解説

    HTML DOMのdocumentElementプロパティは、ドキュメントのルート要素（ドキュメント要素）を取得するために使用されるプロパティです。戻り値はElementオブジェクト型になります。HTML文書において、ドキュメント要素とはルート要素のことなので、<html>要素が該当します。なお、このプロパティは読み取り専用であり、値を代入することはできません。 構文 documentElementプロパティの基本構文は以下のとおりです。 document.documentElement 使用例 documentElementプロパティを使った具体的なサンプルコードを見てみましょう

  2. HTML DOM designModeプロパティの使い方を徹底解説

    HTML DOMのdesignModeプロパティを使用すると、ドキュメント全体が編集可能かどうかを指定できます。このプロパティを活用することで、HTMLドキュメントはWYSIWYG（What You See Is What You Get：見たままが得られる）エディターのように動作し、ブラウザ上で直接HTMLドキュメントを編集できるようになります。designModeプロパティのデフォルト値は「off」に設定されており、これを「on」に変更することで、ドキュメントの編集が可能になります。構文designModeプロパティを設定する際の構文は以下の通りです。document.designMode