How ID's with dashes are treated in JavaScript? (automatically global variable creation)

Question

When you create a HTML element and add an ID to it, like:

<div id="test"></div>

It will be automatically available in Javascript as the variable test without the need to use document.getElementById("test").

What I want to know is what happens when you create an ID with dashes, like:

<div id="test-one"></div>

This element will still be available in Javascript through some variable or the variable won't be created? I tried to check the value of test-one and testOne but none of them contains something.

EDIT

I think most of people are misunderstanding the question. I know that creating a variable with dashes is perfect valid.

This is the problem: http://jsfiddle.net/jn33bgkd/

You don't need to use document.getElementById because Javascript creates global variables automatically with the same names of the IDs (i know it's a bad practice to use those, I just wanna know what's the behavior) But these global variables aren't created if the ID has a dash. The question is if the global variable of the element that has an ID with dash is really not created or is created with a differente name.

I know the use of dashes is valid, what i want to know if the global variable containing the HTML element of the same name of the id will still be created. — Pietro Coelho, May 20 '15 at 16:00
FYI, it's generally considered a poor strategy to use those auto-created global variables in the first place because it's way too easy for some other Javascript to end up conflicting with them. Just use `document.getElementById("test-one")` and forget about the auto-created globals. — jfriend00, May 20 '15 at 16:02
var myDiv = $("#test-one") is valid or getElementById will work also — Below the Radar, May 20 '15 at 16:02
http://jsfiddle.net/arunpjohny/7dytbg2e/1/ - http://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id — Arun P Johny, May 20 '15 at 16:03

score 3 · Accepted Answer · edited May 23 '17 at 12:21

In JavaScript, test-one is an expression containing two identifiers, test and one, and the - operator; essentially, an arithmetic subtraction between two unrelated variables. Because of this, writing test-one literally won't work.

However the element is still accessible using an indexer, i.e. window['test-one'].

window['test-one'].innerHTML = 'Test';

<div id="test-one"></div>

Note that an element with an ID of "test-one" is never reflected as the global testOne, as it would otherwise create a conflict with an element with an ID of "testOne".

This behavior was originally non-standard, having its roots in IE legacy. It is now documented in HTML5 and in the HTML Living Standard, though the former considers it non-normative. Presumably this was done to facilitate cross-browser compatibility with legacy documents.

Related question: Do DOM tree elements with ids become global variables?

yeah thanks this is exacly the answer i wanted. So the global variable is still there but only acessible by the window object. — Pietro Coelho, May 20 '15 at 16:10

score 2 · Answer 2 · answered May 20 '15 at 16:04

What you're asking for is called "inflection", this is when strings such as "test-one" are interpreted as "testOne".

Generally there are some languages that take this approach (e.g.: Ruby); however it's generally not a great approach as it requires libraries with rules to define the inflection, and the variables are not always standardised.

Remember, you can always shortcut a method:

var x = document.getElementById;
var testOne = x("test-one");

Have you considered using document.querySelector and document.querySelectorAll?

"Shortcutting" a method rarely works like that; if you assign a method to a variable, you end up with a function that no longer has the right idea of `this`. You'd do better to say `var x = document.getElementById.bind(document);` or the like. — cHao, May 20 '15 at 16:21

How ID's with dashes are treated in JavaScript? (automatically global variable creation)

2 Answers2