We’re going to start a new beginners series on javascript, starting from the top down. In this first tutorial you’ll notice a lot of code. If you understand it, great, you’re ahead of the game. If not, don’t worry, we’ll be going into more detail on all of it in future posts.
In order to understand how to maneuver your way around the interaction of javascript and HTML, we have to look at how the “model” of this interaction is set up: DOM, or document object model. This model is the basis for how we access the HTML in javascript. In essence, when you see:
window.location.href = 'http://www.displayblockcreative.com';
You are accessing the DOM object window. On the left you’ll see a break down of the DOM hierarchy.
One interesting thing that you’ll come across is while the document object sits inside of the window object, and is accessible through
window.document.getElementById('foo');
it is also available independently through
document.getElementById('foo');
The latter is actually the preferred method of getting the document object because of fewer characters (Programmers type too much already).
We’ll be going into more ways of accessing each individual object, but to whet your eyes a little here’s a few ways of accessing DOM objects in javascript:
window['location'].href = 'http://www.displayblockcreative.com';
document.getElementById('fooForm')[0].input[0].style.backgroundColor = '#fff';
document.forms[0].input[0].innerHTML = 'hello world';