Question

I’ve seen some JavaScript code to access HTML elements like this: elementID.innerHTML, and it works, though practically every tutorial I searched for uses document.getElementById(). I don’t even know if there’s a term for the short addressing.

At first I thought simplistically that each id’ed HTML element was directly under window but using getParent() shows the tree structure is there, so it didn’t matter that elements I wanted were nested. I wrote a short test case:

http://jsfiddle.net/hYzLu/

<div id="fruit">Mango<div id="color">red</div></div>
<div id="car">Chevy</div>
<div id="result" style="color: #A33"></div>

result.innerHTML = "I like my " + color.innerHTML + " " + car.innerHTML;

The “short” method looks like a nice shortcut, but I feel there is something wrong with it for it practically not appearing in tutorials.

Why is document.getElementById() preferred, or may be even required in some cases?

Answer 1

Why shouldn’t I access elements more “directly” (elemId.innerHTML)

Because, according to the others in this thread, referencing arbitrarily by id name is not fully supported.

So, what I think you should be doing instead is store their selections into a var, and then reference the var.

Try instead

var color = document.getElementById('color');
color.innerHTML = 'something';

The reason why this would be a good thing to do is that performing a lookup in the DOM is an expensive process, memory wise. And so if you store the element’s reference into a variable, it becomes static. Thus you’re not performing a lookup each time you want to .doSomething() to it.

Please note that javascript libraries tend to add shim functions to increase general function support across browsers. which would be a benefit to using, for example, jquery’s selectors over pure javascript. Though, if you are in fact worried about memory / performance, native JS usually wins speed tests. (jsperf.com is a good tool for measuring speed and doing comparisons.)