Referring to HTML elements in Javascript in Metro apps

Question

When in Javascript code, normally I use code like this to get a reference to an element:

var elem = document.getElementById("myElementName");

But this seems to work, too:

var elem = myElementName;

How is that happening? Is it just luck? Is that the accepted way to refer to elements in Metro javascript apps? -- Ken

Answer 1

Hi Ken,

The W3C object model allows this: http://msdn.microsoft.com/en-us/library/ms533043(VS.85).aspx

You can query by class or id as well.

 

by id: WinJS.Utilities.query("#localDecoderVideo")[0].src = URL.createObjectURL(file, false);

document.getElementById("contentTemplate")

by class:

WinJS.Utilities.query(".clsDecoderVideo")[0].src = URL.createObjectURL(file, false);

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Thanks. Yes, I'm aware of how the DOM works. My point is that somehow the raw element name is available as the right-hand side of an assignment, without the need to call getElementById or to use WinJS.Utilities.query. I had thought one of those function calls (or document.queryselector or something like it) was required.

I don't understand how or why works to simply refer to the element name in Javascript code. Thanks -- Ken

Answer 3

I don't think that you can access every element in the DOM without using one of the usual queries, but it appears that the id's of WinJS.UI controls appear in the global namespace.   Maybe it is a good idea to always use getElementById even if you don't have to just for consistency.

Answer 4

Yea, I'm thinking the same thing. That's what it looks like: WinJS controls appear in the global namespace. I guess I'll just go with calling getElementById for consistency. Otherwise, you have to think about it for each element reference! Thanks -- Ken

Answer 5

So a long time ago IE introduced this behavior (allowing you to access elements by id as a named property of the window object) and eventually Chrome and others adopted it as well. Now it is a part of the HTML5 spec:

http://dev.w3.org/html5/spec/Overview.html#named-access-on-the-window-object

Personally, I find document.getElementById to be less ambiguous and error prone, especially if you happen to have a variable with a similar name to an ID you are using.

 

Cheers,

-Jeff

Answer 6

Very interesting--that's ultimately what I was looking for (that is, who supplies this behavior). Now that I know it's not magic, I'll just use getElementById and get over it. Thanks. -- Ken

Answer 7

Ken,

My guess is that for the most part, we've all been conditioned to use document.getElementByID so our JS would work in any browser...  But since Metro apps are specific to Microsoft's platform, I believe their code examples are taking liberties by referencing the DOM elements directly because they know that code really doesn't have to be cross-browser compliant...  that's my guess at least.  Not sure if its a good practice to get into though.

-Michael