$(document).ready equivalent without jQuery
Tags: javascript, programming, jquery
Published: 2023-05-28 19:58:15

---
title: "$(document).ready equivalent without jQuery"
published: true
author: Navya Arora
description: "This article presents the guide for $(document).ready method equivalent without using jQuery"
tags: javascript, programming, jquery
canonical_url: "https://builtin.com/articles/document-ready-javascript"
---
In this article, we will see the $(document).ready method equivalent without using jQuery. In [jQuery](https://jquery.com/), the [$(document).ready()](http://learn.jquery.com/using-jquery-core/document-ready/) method is used to execute JavaScript code as soon as the DOM (Document Object Model) is ready. It ensures that the DOM is fully loaded before executing any code that manipulates the DOM. This method only waits for the DOM to be loaded, without taking into account the loading of stylesheets, images, and iframes. This method specifies the function to execute when the DOM is fully loaded. There are a few ways by which similar functionality can be achieved without jQuery, i.e.,

- By implementing the DOMContentLoaded event

- By using the async/await function with the 'load' event

## Approach 1: 
We will use the **DOMContentLoaded** method to update the content of an HTML element as soon as it is ready. The **DOMContentLoaded** event fires when the initial HTML document has been completely parsed and loaded. It does not wait for stylesheets and images to finish loading.

This event gets executed once the basic HTML document is loaded and its parsing has taken place. 

Some of the advantages of using the DOMContentLoaded event are:

- It helps in improving user experience as it shows messages or content much faster.

- It takes lesser time in loading the page. 
**Syntax:**
```
document.addEventListener("DOMContentLoaded", function(e) {
  console.log("GeeksforGeeks page has loaded!");
});
```
**Example:**
In this example, we are displaying a heading using the **<h1></h1>** tags. The content of the heading will be displayed only when the HTML document has been completely loaded. This is ensured with the help of the **DOMContentLoaded** method.

```
<!DOCTYPE html>
<html>
  <head>
    <title>DOM Content Loaded Example</title>
    <link rel="canonical" href="https://builtin.com/articles/document-ready-javascript" />
    <script>
      
      document.addEventListener('DOMContentLoaded', () => {
        const greeting = document.querySelector('#greeting');
        greeting.textContent = 'GeeksforGeeks';
      });
      
    </script>
  </head>
  <body>
    <h1 style="color: green;" id="greeting"></h1>
    <h3>$(document).ready equivalent without jQuery</h3>
  </body>
</html>

```
**Output:**

![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twkaxtjf78wrarzxpk1p.png)
The Javascript code inside the **<script>** tags is executed when the initial **DOMContentLoaded** event is triggered. This event is fired when the initial HTML document has been completely loaded and parsed, without waiting for external resources like images and stylesheets. 

As a result, when the **DOMContentLoaded** event occurs, the **<h1>** element with the id **greeting** will display the text **GeeksforGeeks** instead of being empty.

This demonstrates how to manipulate the content of HTML element using Javascript when the **DOMContentLoaded** event is triggered.

## Approach 2: 
We will use the **readystatechange** event, the **readystatechang**e event is triggered when the ready state of the document changes. By checking if the **document.readyState** is set to **"complete"**, you can determine when the DOM is ready. Here's an example:
**Syntax:**

```
document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    console.log("Page is loaded completely!");
  }
};
```
**Example:**
In this example, we are using the readystatechange event and checking the document.readyState property to determine when the DOM is ready.

The **readystatechange** event is triggered when the ready state of the document changes. The **document.readyState** property represents the current state of the document and can have different values throughout the loading process.

The **document.readyState** property can have the following values:

- "loading": It means document is still loading.
- "interactive": The DOM is loaded but some external resources are still loading.
- "complete": The DOM is completely loaded.
By using the **document.onreadystatechange** event and checking the **document.readyState** property, we can accurately detect when the DOM is ready and perform necessary actions or execute code accordingly in this example we are changing the background color of Click Me button to red and text to white on page load.

```
<!DOCTYPE html>
<html>

<head>
    <title>onreadystatechange Example</title>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>$(document).ready equivalent without jQuery</h3>
    <button id="myButton">Click me!</button>
</body>
<script>
    document.onreadystatechange = function () {
        if (document.readyState === "loading") {
            console.log('Page is loading');
        }
        if (document.readyState === "interactive") {
            console.log('DOM is ready');
        }
        if (document.readyState === "complete") {
            console.log('Page is fully loaded');
            const button = document.getElementById('myButton');
            button.style.backgroundColor = 'red';
            button.style.color = 'white';
        }
    };
</script>

</html>
```
**Output:**

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjewd081e6lp1eo2pebz.gif)

## Supported Browsers:

- Google Chrome 90.0+
- Internet Explorer 9.0
- Safari 4.0
- Opera 10.5
- Firefox 3.6

So here we used the $(document).ready method equivalent without using jQuery!!!

Connect me on Twitter:- [Twitter](https://twitter.com/navyaarora_) 🤝🏻

Do check out my GitHub for amazing projects:- [GitHub](https://github.com/navyaarora01) 🤝🏻

Connect me on LinkedIn:- [Linkedin](https://www.linkedin.com/in/navyaarora01/) 🤝🏻