Manipulation of DOM by JavaScript execution order

Question

I have the following code and results is attached at the end. I understand that JQuery.ready and JQuery.Window load events are run after the DOM is created so it can manipulate the DOM but not the first function to change the background of John.

My questions are:

The background of John has not changed to yellow is because JavaScript is backward referencing by nature and it can't locate the element with the id name1 at the point when the script is run?
If I have to run the first function to change the background of John, should this function be used after the DIV tags?

Blockquote

<script>
    (function () {
        $('#name1').css('background-color', 'yellow');
    })();

    $(function () {
        $('#name2').css('background-color', 'red');
    });

    $(window).load((function () {
        $('#name3').css('background-color', 'blue');
    }));
</script>

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>
    (function () {
        $('#name4').css('background-color', 'yellow');
    })();
</script>

Blockquote

enter image description here

You just answered your own question. – Sverri M. Olsen Apr 18 '15 at 22:28 — Sverri M. Olsen, Apr 18 '15 at 22:28

score 2 · Accepted Answer · edited May 23 '17 at 11:51

HTML gets read by the browser from top to bottom. So:

<script>

this gets executed immediately: (but as nothing is there yet, there will be no change). To further explain, these are called immediate executed functions (IEFs) ==> (function(){ ... })(); but in this case is pointless to have it because the code will be executed immediately anyway.

    (function () {
        $('#name1').css('background-color', 'yellow');
    })();

this is actually a shortcut in jQuery for $(document).ready(...); It is consider not such a good practice because it is not as readable.

    $(function () {
        $('#name2').css('background-color', 'red');
    });

this one does a window load (which is not exactly the same).

    $(window).load((function () {
        $('#name3').css('background-color', 'blue');
    }));
</script>

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>

this is also executed immediately (IEFs): in this case it will work but it is not a best practice to do this.

    (function () {
        $('#name4').css('background-color', 'yellow');
    })();
</script>

if you want to know more of the differences between document.ready and window.load, look at this stackoverflow question

JavaScript is an event driven language, and the advantage is that you can add as many listeners to events as you need, so adding an event listener to DOM content loaded would be —almost— always the best approach. It is also a best practice to load the scripts always at the end, this way you let the user get the content and styles first and then the functionality kicks in.

How I would have written your code:

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // DOM fully loaded and parsed
        $('#name1').css('background-color', 'yellow');
        $('#name2').css('background-color', 'red');
        $('#name3').css('background-color', 'blue');
        $('#name4').css('background-color', 'yellow');
    });
</script>

Although I wouldn't have used jQuery for this :P. I wouldn't even have used JavaScript for this, just good old CSS ;)

score 1 · Answer 2 · answered Apr 18 '15 at 22:52

When manipulating the DOM via Javascript (or a Javascript library or framework) you must bring those elements of the DOM you want to manipulate into existence before you attempt to manipulate them.

If you don't, then... there is simply nothing there to manipulate.

Manipulation of DOM by JavaScript execution order

2 Answers2