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

HTML DOMのDialogオブジェクト徹底解説！プロパティ・メソッドと実装例

HTML DOM Dialogオブジェクトとは

HTML DOMのDialogオブジェクトは、HTML5で導入された<dialog>要素に対応するオブジェクトです。Webページ上にポップアップやモーダルウィンドウを作成する際に使用されます。

なお、ダイアログボックスを画面に表示してユーザーが操作できるようにするには、open属性の値を設定しておく必要があります。この属性が設定されていない場合、ダイアログは画面上に表示されません。

Dialogオブジェクトのプロパティ一覧

Dialogオブジェクトには、以下の2つの主要なプロパティが用意されています。

プロパティ説明
openダイアログを開くかどうかを設定、または現在の状態を取得します。
returnValueダイアログの戻り値（返却値）を設定または取得します。

Dialogオブジェクトのメソッド一覧

ダイアログの表示や非表示を制御するために、以下のメソッドが提供されています。

メソッド説明
close()ダイアログを閉じます。
show()ダイアログを表示します。
showModal()最前面のモーダルダイアログとしてダイアログを表示します。

構文（Syntax）

JavaScriptで新しいダイアログオブジェクトを作成するには、createElement()メソッドを使用します。

var p = document.createElement("DIALOG");

実装例：動的にダイアログを生成するサンプルコード

ここでは、HTML DOMのDialogオブジェクトを使った具体的な例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title>DIALOG OBJECT</title>
<style>
    dialog{
        border:2px solid blue;
        font-weight:bold;
    }
</style>
</head>
<body>
<p> 下のボタンをクリックするとdialog要素が作成されます</p>
<button onclick="createDialog()">CREATE</button>
<script>
    function createDialog() {
        var dlg = document.createElement("DIALOG");
        var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
        var bl=document.createElement("BR");
        var btn = document.createElement("BUTTON");
        var btnText=document.createTextNode("CLICK HERE");
        dlg.setAttribute("open", "open");
        dlg.appendChild(dlgTxt);
        dlg.appendChild(bl);
        btn.appendChild(btnText);
        dlg.appendChild(btn);
        document.body.appendChild(dlg);
    }
</script>
</body>
</html>

出力結果

このコードを実行すると、まず「CREATE」ボタンだけが表示されたページが出力されます。

「CREATE」ボタンをクリックすると、青い枠線で囲まれたダイアログボックスと、その内部にある「CLICK HERE」ボタンが表示されます。

コードの解説

上記の例では、以下のような処理を行っています。

1. ボタンの設置

まず、ユーザーがクリックするとcreateDialog()関数を実行する「CREATE」ボタンを作成しています。

<button onclick="createDialog()">CREATE</button>

2. 要素の生成とテキストノードの追加

createDialog()関数内では、createElement()メソッドを使って<dialog>要素を生成します。続いて、createTextNode()メソッドでテキストノードを作成し、ダイアログ内に追加します。

さらに同じ方法で、<dialog>要素の内側に配置する<button>要素と、その表示用テキストも生成しています。

3. open属性の設定とドキュメントへの追加

setAttribute()メソッドを使用して、ダイアログボックスのopen属性値を設定することで、ユーザーに対してダイアログを表示できる状態にします。

最後に、document.body.appendChild()メソッドの引数として<dialog>要素を渡すことで、ボタンを含むダイアログ全体をドキュメントのbodyに追加しています。

function createDialog() {
    var dlg = document.createElement("DIALOG");
    var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
    var bl=document.createElement("BR");
    var btn = document.createElement("BUTTON");
    var btnText=document.createTextNode("CLICK HERE");
    dlg.setAttribute("open", "open");
    dlg.appendChild(dlgTxt);
    dlg.appendChild(bl);
    btn.appendChild(btnText);
    dlg.appendChild(btn);
    document.body.appendChild(dlg);
}

まとめ

HTML DOMのDialogオブジェクトを活用すれば、JavaScriptだけでポップアップやモーダルウィンドウを柔軟に制御できます。show()、showModal()、close()といったメソッドとopen属性を組み合わせることで、ユーザーの操作に応じたインタラクティブなUIを簡単に実装できます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注