HTML DOM Dialog Object

Last Updated : 13 Jun, 2023

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 GeeksforGeeks</dialog>
    <button onclick="myGeeks()" open>Submit</button>
    <script>
        function myGeeks() {
            // 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="myGeeks()" open>Submit</button>
    <script>
        function myGeeks() {
            let gfg =
                document.createElement("DIALOG");
            let f =
                document.createTextNode("Welcome to GeeksForGeeks");
            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+

M

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

Similar Reads

HTML DOM type Event Property

The type event property in HTML DOM is used to return the type of the triggered event. It returns a string that represents the type of the event. The events can be keyboard events or mouse events. Syntax: event.type Return Value: It returns a string that represents the type of event. Example: In thi

HTML DOM timeStamp Event Property

The timeStamp property in the HTML DOM refers to a read-only property that returns the time (in milliseconds) at which an event was created. The value is measured relative to the UNIX epoch (January 1, 1970, 00:00:00 UTC). This property is commonly used to determine the timing of events and can be u

HTML | DOM Details Object

The DOM Details Object is used to represent the HTML <details> element. The Details element is accessed by getElementById(). Properties: open: The details tag has an attribute called 'open' which is used to display the hidden information by default. Syntax: document.getElementById("ID"); Where

HTML DOM cancelable Event Property

The cancelable event property indicates whether the event's default action can be prevented. If the value is true, the default action can be prevented using event.preventDefault(). If false, the default action cannot be prevented. It is a read-only property.It is a read-only boolean property.Syntax:

HTML DOM Style borderImageRepeat Property

The borderImageRepeat style property in HTML DOM is used to set or return the borderImageRepeat property. It specifies whether the border image should repeat to fill the area, stretched to fill the area, set to the initial value, inherit property from its parent, etc. Depending on the need it will b

HTML | DOM Style borderImageOutset Property

In the Style borderImageOutset Space which contains the border, image is to be painted is called the border-image space. By default, the boundaries of the border image area match with the boundaries of the elementâ€™s border-box. However, these boundaries can be extended using the border-image-outset

HTML | DOM Figcaption Object

The Figcaption Object in HTML DOM is used to represent the HTML <figcaption> element. The figcaption element is accessed by getElementById(). Syntax: document.getElementById("ID"); Where ID represent the element id. Example 1: html <!DOCTYPE html> <html> <head> <title>

HTML | DOM Style backgroundRepeat Property

The backgroundRepeat property in HTML DOM is used to set or return the CSS backgroundRepeat property. It also checks whether the background-image is repeated or not. Syntax: It is used to returns the backgroundRepeat property.object.style.backgroundRepeat It is used to set the backgroundRepeat prope

HTML | DOM DList Object

The DOM DList Object is used to represent the HTML <dl> tag. The Dlist element is accessed by getElementById(). Syntax: document.getElementById("ID");< Where â€œidâ€ is the ID assigned to the â€œdlâ€ tag.Example-1: html <!DOCTYPE html> <html> <head> <title>HTML DOM DList O

HTML DOM insertBefore() Method

The insertBefore() method in HTML DOM is used to insert a new node before the existing node as specified by the user. Syntax: node.insertBefore( newnode, existingnode ) Parameters: This method accepts two parameters as mentioned above and described below: newnode: It is the required parameter. This