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

HTML DOMのexecCommand()メソッドとは？構文・コマンド一覧・使い方を解説

execCommand()メソッドとは

HTML DOMのexecCommand()メソッドは、ユーザーが選択した編集可能な領域に対して、指定されたコマンドを実行するためのメソッドです。ドキュメント内に編集可能な領域を用意するには、あらかじめdocument.designModeプロパティを設定しておく必要があります。

なお、execCommand()メソッドは現在非推奨（Deprecated）の扱いとなっており、今後のブラウザで削除される可能性があります。新規開発では、Clipboard APIやSelection APIなど、より現代的なAPIの利用が推奨されています。ただし、レガシーコードの理解や簡易的なリッチテキスト編集の実装においては、依然として知っておくと有用なメソッドです。

構文

execCommand()メソッドの基本構文は以下のとおりです。

document.execCommand(command, showUI, value)

各引数の意味は次のとおりです。

  • command … 編集可能な領域に対して実行したいコマンド名を指定します。
  • showUI … コマンド実行時にユーザーインターフェースを表示するかどうかを指定する真偽値（Boolean）です。
  • value … 一部のコマンド（fontSize、foreColorなど）で必要となる値を指定します。不要なコマンドの場合はnullを渡します。

commandパラメータに指定できる主な値

"backColor", "bold", "createLink", "copy", "cut", "defaultParagraphSeparator", "delete",
"fontName", "fontSize", "foreColor", "formatBlock", "forwardDelete", "insertHorizontalRule",
"insertHTML", "insertImage", "insertLineBreak", "insertOrderedList", "insertParagraph",
"insertText", "insertUnorderedList", "justifyCenter", "justifyFull", "justifyLeft",
"justifyRight", "outdent", "paste", "redo", "selectAll", "strikethrough", "styleWithCss",
"superscript", "undo", "unlink", "useCSS"

これらのコマンドを使うことで、文字の装飾（太字・斜体・取り消し線など）、フォントサイズや色の変更、リストの作成、テキストの整列、コピー＆ペースト、Undo/Redoなど、多彩な編集操作を実現できます。

サンプルコード

それでは、execCommand()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body ondblclick="changeText()">
<h1>execCommand() method example</h1>
<h3>double click on any text to change its fontsize and color</h3>
<p>Here is some text for being clicked upon. Some sample text is here too </p>
<script>
    document.designMode = "on";
    function changeText() {
      document.execCommand("fontSize",true,"20px");
      document.execCommand("backColor",true,"lightgreen");
      document.execCommand("foreColor",true,"blue");
}
</script>
</body>
</html>

実行結果

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

HTML DOMのexecCommand()メソッドとは？構文・コマンド一覧・使い方を解説

ページ上のテキストをダブルクリックすると、そのテキスト部分だけに書式変更が適用されます。

HTML DOMのexecCommand()メソッドとは？構文・コマンド一覧・使い方を解説

コードの解説

上記の例では、以下のような仕組みで動作しています。

まず、documentのbody要素に対してダブルクリック（dblclick）イベントのイベントハンドラを関連付けています。bodyの子要素であるh1、h3、p要素のいずれかをダブルクリックすると、changeText()関数が実行されます。

<body ondblclick="changeText()">

スクリプト内では、最初にdocument.designMode = "on";を設定することでドキュメント全体を編集可能な状態にしています。そのうえで、changeText()関数がdocumentのexecCommand()メソッドを呼び出し、「fontSize」「backColor」「foreColor」の各コマンドとそれぞれの値を引数として渡します。

function changeText() {
document.execCommand("fontSize",true,"20px");
document.execCommand("backColor",true,"lightgreen");
document.execCommand("foreColor",true,"blue");
}

その結果、ユーザーがダブルクリックした編集可能な領域（選択されたテキスト）に対して、文字サイズ20px・背景色ライトグリーン・文字色ブルーという書式がまとめて適用される仕組みです。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド