When is a DOM element "ready"?

Question

This might sound like a silly question, and I tend to use:

$(document).ready(function() { });

But basic question.

Let's say I have a list of elements like this:

<body>
  <p>Paragraph</p>
  <div>Div</div>
  <div id="HelloWorld">Hello, World</div>
  <script>
    var hw = $('#HelloWorld');
    $(document).ready(function() {
      // hw is available for me here
    });
  </script>
  <p>Another paragraph</p>
</body>

It seems the div is available, and I don't run into errors, but is there anything technically wrong with this? Not talking perfectly organized code, but just curious about the technical question at hand.

So I suppose the question is:

Is a DOM element considered complete and available as soon as the browser reads it, regardless if the rest of the elements have loaded yet?

The answer is yes. The DOM is assembled element by element. That's why it's often advised to put JavaScript imports right before the `
` tag. — Pointy, Aug 24 '15 at 23:54
Not exactly a duplicate but you can probably find the answer here ~ http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Phil, Aug 24 '15 at 23:54
Cool. I've run into a unique use-case and never really had to face the question. — user1447679, Aug 24 '15 at 23:55
@NathanParker that's not accurate... `ready` means dom ready not all images loaded — charlietfl, Aug 24 '15 at 23:56
(edit: this is wrong, read further) If a div doesn't have any images or other assets that have to be requested to the server, then yes, the dom element can be ready even before the document is completely loaded. — Nathan Parker, Aug 24 '15 at 23:57
@NathanParker `.ready()` is triggered when the DOM is parsed, while `.load()` waits for all assets to be loaded (fully rendered page). — blex, Aug 24 '15 at 23:59
@blex You are right, I read `ready` but in my mind appeared the word `load`. Thank you. — Nathan Parker, Aug 25 '15 at 00:00
@NathanParker: *"If a div doesn't have any images or other assets that have to be requested to the server, then..."* That's still incorrect. The `div` is "ready" and accessible. The images *in* it may not be loaded (but the `img` elements are accessible regardless), but that's irrelevant to the `div`. — T.J. Crowder, Aug 25 '15 at 00:04

T.J. Crowder · Accepted Answer · 2015-08-25T00:03:31.703

It seems the div is available, and I don't run into errors, but is there anything technically wrong with this?

No. As long as the script isn't run until after the element exists, you can access it. A script in a script tag that's after the markup for the element it refers to will consistently, cross-browser, be able to access that element.

Always works:

<div id="foo">...</div>
<script>
    $("#foo")...
</script>

Never works:

<script>
    $("#foo")...
</script>
<div id="foo">...</div>

Works only because jQuery delays executing the ready callback:

<script>
    $(document).ready(function() {
        $("#foo")...
    });
</script>
<div id="foo">...</div>

This is one of the reasons for the common recommendation to put script tags at the end of the document, just before the closing </body> tag. That way, they have access to all of the elements defined above them. (And they don't delay the initial presentation of the page, which is usually, though not always, what you want...)

Understood and thank you. I'm stuck with a weird use-case. S.O. Great answer and will accept as soon as it lets me. — user1447679, Aug 25 '15 at 00:02

When is a DOM element "ready"?

1 Answers1