JavaScript Food Chain


JavaScript Food Chain

This is part nine of the JavaScript tutorial. If you missed the previous lessons, make sure you complete them prior to viewing this JavaScript Food Chain tutorial.

When dealing with JavaScript objects, there is a food chain. JavaScript works from the outside in. So, the food chain would be as follows:

window document objects in the document

If we were talking about images, the chain would be:

window document images

If we were talking about forms, the chain would be:

window document form fields and submit button

However, in JavaScript, we denote this food chain using dots, such as:


As you can see, there is a certain order to things, and JavaScript doesn’t accept anything less. This is true for Arrays as well. JavaScript demands that the first item in the Array is 0, and that the Array items are listed in order.

Your web browser also uses an Array system. It sees the first image on your web page and assigns it an Array number of zero, the second object is assigned 1, and the third is assigned 2, and so on. In fact, it assigns Array’s for graphics, links, anchors, and forms as well as the page loads.

It is important to understand the JavaScript food chain, and to think just as JavaScript and your browser thinks as you write code – from the outside to the inside.

This concludes the JavaScript Food Chain lesson. In the next lesson, we will focus on Write JavaScript Code.