HTML DOM Dialog Object
The DOM Dialog Object is used to represent the HTML <dialog> element. The Dialog element is accessed by getElementById(). It is used in HTML5.
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “Dialog” tag.
Example 1: In this example, we will use DOM Dialog Object.
HTML
<!DOCTYPE html> < html > < head > < title >DOM dialog Object</ title > < style > dialog { color: green; font-size: 30px; font-weight: bold; font-style: italic; } body { text-align: center; } </ style > </ head > < body > < h1 >DOM Dialog Object</ h1 > <!-- Assigning id to dialog tag --> < dialog id = "GFG" >Welcome to w3wiki</ dialog > < button onclick = "myBeginner()" open>Submit</ button > < script > function myBeginner() { // Accessing dialog tag let x = document.getElementById("GFG"); x.open = true; } </ script > </ body > </ html > |
Output:
Example 2: Dialog Object can be created by using the document.createElement Method.
HTML
<!DOCTYPE html> < html > < head > < title >DOM dialog Object</ title > < style > dialog { color: green; font-size: 30px; font-weight: bold; font-style: italic; } body { text-align: center; } </ style > </ head > < body > < h1 >DOM Dialog Object</ h1 > < button onclick = "myBeginner()" open>Submit</ button > < script > function myBeginner() { let gfg = document.createElement("DIALOG"); let f = document.createTextNode("Welcome to w3wiki"); gfg.setAttribute("open", "open"); gfg.appendChild(f); document.body.appendChild(gfg); } </ script > </ body > </ html > |
Output:
Supported Browsers: The browser supported by DOM Dialog Object are listed below:
- Google Chrome 37+
- Opera 24+
- Safari 6+