What is the DOM ready event?

Question

I need to fire a script as soon as the page content (the whole HTML element) has been received, but it doesn't have to be rendered yet.

I assume that just having a simple <script> tag that executes some code at the very top of my page should do the trick?

To formulate the question differently: does DOM ready mean that all elements and resources have been pulled and rendered?

score 44 · Accepted Answer · edited Jan 05 '22 at 11:54

44

DOM ready means that all the HTML has been received and parsed by the browser into the DOM tree which can now be manipulated.

It occurs before the page has been fully rendered (as external resources may have not yet fully downloaded - including images, CSS, JavaScript and any other linked resources).

The actual event is called window.DOMContentLoaded.

edited Jan 05 '22 at 11:54

Lee Goddard

10,680
4
46
63

answered Sep 28 '12 at 09:57

Oded

489,969
99
883
1,009

@Oded Thanks, so if i want to act of the HTML before it's been parsed into the DOM tree, a plain script tag at the top of the page will work, is that right ? – silkAdmin Sep 28 '12 at 12:58
@silkAdmin - You _can't_ work on the HTML before it got parsed into the DOM tree. JavaScript works _with_ the DOM tree, so trying to work with it before it is fully parsed will be tricky - probably impossible (you will most likely be getting errors). What exactly are you trying to accomplish? – Oded Sep 28 '12 at 13:03
@Oded, i just want to get the response body as a string and send it to the server. Any ideas on what would be the best way ? – silkAdmin Sep 28 '12 at 13:15
@silkAdmin - Best for what? What do you want to optimize for? – Oded Sep 28 '12 at 13:23
@Oded,Well hoping to get it as fast and light weight as possible, i figured waiting on DOM ready for not using the DOM would be unnecessary, as i do not need the page to be parsed. – silkAdmin Sep 28 '12 at 13:28
@silkAdmin - The best way would be to post the script at the very bottom of the base, just before the ` – Oded Sep 28 '12 at 13:30
@Oded, Ok thanks for the insights, it looks like i am stuck on waiting DOM ready. – silkAdmin Sep 28 '12 at 13:40
@Oded, Wait how does GA snippet works then ? I see it does manipulate the DOM and yet doesn't wait on DOM ready. There is a `var s = document.getElementsByTagName('script')[0];` – silkAdmin Sep 28 '12 at 13:45
It "knows" there is at least _one_ `script` element as it is running within it. The problem with trying to operate on parts of the document before DOM ready is that they may not have loaded yet, causing an error and your JavaScript to stop working. – Oded Sep 28 '12 at 13:47
This response is incorrect. There is no such event; it is not either an alias to DOMContentLoaded. – Jan Kyu Peblik Sep 05 '19 at 16:13

score 7 · Answer 2 · answered Sep 28 '12 at 09:58

7

DOMready means: The DOM structure has been built in browser memory. Asynchronously the page already started rendering, but it might not be finished yet as external resources like images, videos etc. will finish loading later.

answered Sep 28 '12 at 09:58

devnull69

16,402
8
50
61

Jan Kyu Peblik · Answer 3 · 2022-11-08T14:47:03.343

I need to fire a script as soon as the page content (the whole HTML element) has been received, but it doesn't have to be rendered yet.

I assume that just having a simple tag that executes some code at the very top of my page should do the trick?

It's likely then that you want the DOMContentLoaded event. You can use it thusly:

    <head>
    <!-- … -->
        <script>
window.addEventListener('DOMContentLoaded',function () {
    //your code here
});
        </script>
    </head>

To formulate the question differently: does DOM ready mean that all elements and resources have been pulled and rendered?

There is no "DOM ready" event. You're probably thinking of jQuery's .ready(), or some similar odd use of this terminology (e.g. Google also has a similarly named proprietary event they refer to).

For the DOMContentLoaded event, however (to quote MDN):

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

score 5 · Answer 4 · edited Sep 28 '12 at 10:24

5

You might also try with the functions

window.onload = function(){
   //your code
  }

or

body.onload = function(){
   //your code
  }

if you don't want to use jQuery.

Be careful though, DOM loaded doesn't mean the page loaded, iframes, javascript, images and css might load after that event.

There is a good tuto on DOM events Javascript tutorial

edited Sep 28 '12 at 10:24

awe

21,938
6
78
91

answered Sep 28 '12 at 10:03

Léo Benallal

59
2

1

An event listener for 'load' (or DOMContentLoaded or whatever actual event you're interested in) would actually be better with this approach, so you don't have to worry about whether you've already assigned something to the event. `window.addEventListener('load',function () { /*...*/ });` – Jan Kyu Peblik Sep 05 '19 at 16:15

What is the DOM ready event?

4 Answers4

Linked

Related