Why shouldn't I access elements more "directly" (elemId.innerHTML)

Question

I saw some JavaScript code for accessing such HTML elements: elementID.innerHTML , and it works, although almost every tutorial I searched uses document.getElementById() . I don’t even know if there is a term for short addressing.

At first, I thought simplistically that every HTML id element was directly below the window , but using getParent() shows that there is a tree structure, so it didn't matter that the 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 bright label, but I feel that something is wrong with it, because it practically does not appear in textbooks.

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

Answer 1

Why shouldn't I access elements more "directly" (elemId.innerHTML)

Since, according to the others in this thread, a link to an id id is not fully supported .

So, what I think you should do is save their selection in var and then reference var.

Try instead

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

The reason this would be good is because doing a search in the DOM is an expensive process that is memory-wise. And therefore, if you store a reference to an element in a variable, it becomes static. This way you are not doing a search every time you want .doSomething() to it.

Note that javascript libraries tend to add padding functions to increase overall browser support for functions. which would be useful to use, for example, a jquery selector on top of pure javascript. Although, if you are really concerned about memory / performance, native JS usually wins speed tests. (jsperf.com is a good tool for measuring speed and making comparisons.)

Answer 2

This is safer, I think. If you had a variable called result in the same context that you are doing result.HTML , I'm sure the browser will drop the wobbler. Doing this with document.getElementById() in this case will obviously provide you with a related DOM element.

Also, if you dynamically add HTML to the page, I may be wrong, but you may also encounter unexpected behavior in terms of result :)

Answer 3

I will also add that not all IDs can have values ​​that will not work as variable names. For example, if your identifier is a “navigation menu”.

Although I suppose you could write a window ["nav-menu"]. innerHTML

What makes me think what will happen if you create a window-level variable with the same name as the identifier? Checkout jsfiddle (tested on chrome): http://jsfiddle.net/8yH5y/

It really seems like a bad idea. Just use document.getElementById ("id") and save the result in a variable if you use the link more than once.