HTML DOM designModeプロパティの使い方を徹底解説
HTML DOMのdesignModeプロパティを使用すると、ドキュメント全体が編集可能かどうかを指定できます。このプロパティを活用することで、HTMLドキュメントはWYSIWYG（What You See Is What You Get：見たままが得られる）エディターのように動作し、ブラウザ上で直接HTMLドキュメントを編集できるようになります。
designModeプロパティのデフォルト値は「off」に設定されており、これを「on」に変更することで、ドキュメントの編集が可能になります。
構文
designModeプロパティを設定する際の構文は以下の通りです。
document.designMode = "on|off"
ここで、「off」がデフォルト値であり、「on」に設定するとドキュメントを編集できるようになります。
使用例
HTML DOMのdesignModeプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>Document designMode Property</h1>
<p> This is a paragraph with some text</p>
<button type="button">BUTTON1</button>
<script>
document.designMode="on";
</script>
</body>
</html>出力結果
上記のコードを実行すると、以下のような画面が表示されます。
ドキュメント編集後の表示は次のようになります。
コードの解説
上記の例では、まず複数のHTML要素を作成しています。具体的には、<h1>要素、<p>要素、そして<button>要素です。
<h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button>
その後、document.designModeを「on」に設定することで、HTMLドキュメントの編集が可能になります。これにより、任意のテキストを変更したり、要素のテキストを消去して要素自体を削除したりすることができます。
例えば、ボタンのテキストを削除すると、ボタン自体も画面から消えます。
まとめ
designModeプロパティは、JavaScriptを使ってドキュメント全体を編集可能な状態にするためのシンプルながら強力な機能です。以下のスクリプトを記述するだけで、すぐに編集モードを有効化できます。
<script> document.designMode="on"; </script>
コンテンツ管理システムや簡易的なテキストエディターのプロトタイプを作成する際など、さまざまな場面で活用できる便利なプロパティなので、ぜひ覚えておきましょう。
-
HTML DOMのdocumentElementプロパティとは？構文と使い方をわかりやすく解説
HTML DOMのdocumentElementプロパティは、ドキュメントのルート要素（ドキュメント要素）を取得するために使用されるプロパティです。戻り値はElementオブジェクト型になります。HTML文書において、ドキュメント要素とはルート要素のことなので、<html>要素が該当します。なお、このプロパティは読み取り専用であり、値を代入することはできません。 構文 documentElementプロパティの基本構文は以下のとおりです。 document.documentElement 使用例 documentElementプロパティを使った具体的なサンプルコードを見てみましょう
-
HTML DOMのdoctypeプロパティとは？構文と使い方をわかりやすく解説
HTML DOMのdoctypeプロパティは、現在のHTML文書に関連付けられているDTD（Document Type Declaration：文書型宣言）を返します。このプロパティは読み取り専用であり、文書型の名前をDocumentTypeオブジェクトとして取得します。なお、対象の文書にDTDが指定されていない場合は、nullが返されます。 構文 doctypeプロパティの基本構文は以下のとおりです。 document.doctype サンプルコード それでは、doctypeプロパティを使用した具体例を見ていきましょう。 <!DOCTYPE html> <html>