I'm new to javascript so while doing some learning i find out that elements with some id available just like
html part
<canvas id="someid"><canvas>
js part
someid.someProperty = something; // works as well as getElementById('someid')
But in all tutorials i found it's told to use getElementById. Sow what benefits of one or another ways of doing this? What way should i prefer? Checked in Firefox, Opera, DWB and geany internal browser(webkit).
Use document.getElementById("whatever") in all cases. Here are some of the relevant issues:
Using the automatic global variable has these issues:
Using document.getElementById():
Some browsers create implicit global variables for named DOM elements. Referencing an element this way in Firefox produces the following warning:
"Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead."
Follow that warning's advice. Using getElementById:
There are no good reasons to use the non-standard method.
For JS you plan to write it's always good to manually bound variables to DOM elements, otherwise you could get undesired results if some Object is bound to the window object and shared the same ID name as your element
var someid = {}; // Some Object
someid.style.color = "red"; // DOM element remains untouched
// we just nested properties and values to the 'someid' Object.
// #someid text has not become red.
var myElement = document.getElementById('someid');
// var myElement = querySelector('#someid');
myElement.style.color = "red";
// Wow, now it is
