HTML DOM Script async Property

Last Updated : 20 Jun, 2023

The DOM Script async property is used to set or return whether a script should be executed asynchronously or not. This property is used to reflect the async attribute. This attribute only works for the external script. There are the following ways that the external script could be executed:

The script will be executed asynchronously with the rest of the page when async is present. This means while the page continues the parsing the time script will be executed.
If the defer is present but async is not present then the script will be executed when the page has finished parsing.
If both, async or defer is not present then the script is fetched and will execute immediately, even before the browser continues parsing the page.

Syntax:

It returns the async property.

scriptObject.async

It is used to set the async property.

scriptObject.async = true|false

Property Values: It contains a Boolean value which specifies that whether the script should be executed asynchronously as soon as it is available, or not.

True: It specifies that the script should be executed asynchronously.
false: It specifies that the script will not be executed asynchronously. By default, it is set to false.

Return Value: It returns a Boolean value that specifies whether the script should be executed asynchronously or not.

Example: In this example, we will use the DOM Script async Property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Script async Property
    </title>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
          DOM Script async Property 
      </h2>    
    <p id="p1">Hello World!</p>

    <script id="myScript" 
            src="demo_async.js" 
            async>
    </script>

    <!-- Button that trigger the Function -->
    <button onclick="myFunction()">
          Click me!
      </button>
    <p id="demo"></p>

    <!-- Main Function -->
    <script>
        function myFunction() {
            let x = 
            document.getElementById("myScript").async;
            document.getElementById("demo").innerHTML = x;
        } 
    </script>
</body>

</html>