Referring to HTML elements in Javascript in Metro apps RRS feed

  • 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

    Wednesday, October 19, 2011 6:51 PM

All replies

  • 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);


    by class:

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


    Jeff Sanders (MSFT)
    Wednesday, October 19, 2011 7:30 PM
  • 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

    Wednesday, October 19, 2011 7:39 PM
  • 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.
    Wednesday, October 19, 2011 7:51 PM
  • 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
    Wednesday, October 19, 2011 7:53 PM
  • 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:


    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.




    Wednesday, October 19, 2011 8:08 PM
  • 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
    Thursday, October 20, 2011 1:53 PM
  • 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.




    Wednesday, October 26, 2011 6:01 PM