2

Is there any advantage to writing out document.getElementById when you can just use the shorthand Id.something? I'm interested because I see some code online in my tutorials declaring variable x equals to document.getElementById, and then them using that variable, instead of just using the shorthand:

Example: 

<code>
    var timeDisplay = document.getElementById("time");
    timeDisplay.innerHTML = message;
</code>

VS.

<code>
    time.innerHTML = message;
</code>
the12
  • 2,395
  • 5
  • 19
  • 37
  • You should never do `Id.something`. This is dangerous and confusing. What if someone defined the `window.time` property? [Uh oh now your entire code breaks.](https://jsfiddle.net/DerekL/6yz8j7dx/) – Derek 朕會功夫 Jul 03 '16 at 00:43
  • http://stackoverflow.com/a/15768009/2300466 check this for more reasons on why `id.someMethod` is bad. – Ahmad Ibrahim Jul 03 '16 at 01:06
  • You said in a comment below that writing `document.getElementById` every time is tedious. Well you can declare a helper function: `function $(id) { return document.getElementById(id); }` - now you just have to write `$("time")`, which is still an extra few characters but nowhere near as many. – nnnnnn Jul 03 '16 at 01:14
  • @AhmadIbrahim: That's pretty obsolete. Access to elements via global variables is now standardized. I wouldn't often do it, but some of the old questions on the subject are out of date. –  Jul 03 '16 at 01:15
  • @squint Yes, I saw the comment on the answer, but the answer is valid regarding the browser support (i.e. old versions of Firefox). – Ahmad Ibrahim Jul 03 '16 at 01:26
  • @AhmadIbrahim: Oh yeah, I totally missed that comment. Wouldn't have bothered you with it had I seen that. –  Jul 03 '16 at 01:50

1 Answers1

3

Expanding on my comment, you should never use the "shorthand" because it is dangerous and confusing.

It is dangerous because someone else can defined the window.time property before your code gets executed, and now your entire code breaks:

// some one put this in the global scope
var time = new Date();

// your code
time.innerHTML = message; // nope!

https://jsfiddle.net/DerekL/6yz8j7dx/

It isn't even about subjective choices. It's that you should almost never do time.something.

Bonus example on why it is confusing:

<div id="history"></div>

history.textContent = "Will it work?";

Guess what will happen?

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • Thank you. It is a little bit tedious writing on GetElementById everytime I want to use it, but I will do it as it does make sense as it is probably "best practice" and will avoid the situation as you described earlier. – the12 Jul 03 '16 at 00:57
  • @rich22 If you find it tedious you can always use `.querySelector` which is much better than `getElementById`, or use jQuery `$("#time)`. – Derek 朕會功夫 Jul 03 '16 at 00:59
  • @rich22: Keep in mind that one could just as easily say that you should "never" run code without knowing how it impacts your global environment and claim that it isn't even about subjective choices. There are many globals that can be wiped out by other scripts if you don't manage your environment carefully. –  Jul 03 '16 at 01:01
  • 1
    @rich22 Before I started using jQuery, I'd have like a wrapper function to help with having to type so many characters that often – Honinbo Shusaku Jul 03 '16 at 01:01
  • Abdul is right. Using a library just to shorten a function name isn't sensible. –  Jul 03 '16 at 01:03
  • @rich22 A good text editor or integrated development environment with a reasonably intelligent auto-complete feature can alleviate the pain of needing to type the same thing over again. – kevin628 Jul 03 '16 at 01:03
  • @squint I would say using jQuery gives you far more benefits than shortening function names. – Derek 朕會功夫 Jul 03 '16 at 01:05
  • 1
    @Derek朕會功夫: I wouldn't. –  Jul 03 '16 at 01:07
  • 2
    Why is `.querySelector()` "much better" than `.getElementById()`? – nnnnnn Jul 03 '16 at 01:11
  • If you are going to use it directly make sure you use some kind of prefix and descriptive names for your ID's
    – jigzat May 30 '18 at 20:07