` tags and enclosed in a code block: ```html Ensuring Code Execution After DOM Load in JavaScript (Without jQuery) JavaScript Alternatives to jQuery's $(document).ready()

Here's how you can achieve the same functionality without jQuery:

Using the DOMContentLoaded Event:

This is the most widely recommended approach for modern browsers. The DOMContentLoaded event fires when the HTML document has been parsed and the DOM is ready, but before external resources like images or stylesheets have loaded.

document.addEventListener("DOMContentLoaded", function() {
  // Your code to be executed after the DOM is ready
});

Checking document.readyState (for broader browser compatibility):

This method works across a wider range of browsers, including older versions of Internet Explorer. It involves checking the readyState property of the document object. Here's a breakdown of the possible values:

• "loading": The document is still loading.
• "complete": The document has completely loaded.

function runWhenReady() {
  if (document.readyState != 'loading') {
    // The DOM is ready, so execute your code
  } else {
    // If the DOM isn't ready yet, add an event listener for 'DOMContentLoaded'
    document.addEventListener("DOMContentLoaded", runWhenReady);
  }
}

runWhenReady();

Key Differences to Consider:

• jQuery's $(document).ready() offers a concise syntax, while the vanilla JavaScript alternatives might require a bit more code.
• The DOMContentLoaded event ensures the DOM structure is available, whereas window.onload (which fires when the entire page, including images and other resources, has loaded) might be better suited for situations where you need to work with fully loaded content.

document.addEventListener("DOMContentLoaded", function() {
  console.log("The DOM is ready!");

  // Your code that interacts with the DOM elements can go here
  const element = document.getElementById("myElement");
  element.textContent = "Hello, world!";
});

Checking document.readyState:

function runWhenReady() {
  if (document.readyState != 'loading') {
    console.log("The DOM is ready!");

    // Your code that interacts with the DOM elements can go here
    const element = document.getElementById("myElement");
    element.textContent = "Hello, world!";
  } else {
    document.addEventListener("DOMContentLoaded", runWhenReady);
  }
}

runWhenReady();

1. Deferred Loading with defer attribute:

This technique doesn't directly target DOM readiness, but it can be helpful for specific scenarios. By adding the defer attribute to your JavaScript <script> tag, you instruct the browser to download the script in parallel with HTML parsing but wait to execute it until after the DOM is fully loaded. This ensures your code doesn't block the initial rendering of the page.

<script src="myscript.js" defer></script>

Note: This approach is most beneficial for external JavaScript files. Inline scripts with the defer attribute might still execute before the DOM is entirely ready.

1. Window onload Event:

While not ideal for all situations due to waiting for all resources to load, the window.onload event can be used as a fallback, especially for older browsers with limited support for DOMContentLoaded.

window.onload = function() {
  // Your code to be executed after the entire page has loaded
};

Choosing the Right Method:

• If ensuring code execution only after the DOM structure is available is crucial, prioritize DOMContentLoaded.
• For broader browser compatibility, consider the document.readyState check.
• If you want to leverage script execution while ensuring it doesn't block initial rendering (for external scripts), defer can be a good option.
• Use window.onload cautiously, primarily for scenarios where you need to work with fully loaded content, including images and external resources.