StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>As mentioned in the earlier answer this behavior is known as <a href="https://html.spec.whatwg.org/multipage/browsers.html#named-access-on-the-window-object" rel="nofollow noreferrer">named access on the window object</a>. The value of the <code>name</code> attribute for some elements and the value of the <code>id</code> attribute for all elements are made available as properties of the global <code>window</code> object. These are known as named elements. Since <code>window</code> is the global object in the browser, each named element will be accessible as a global variable.</p> <p>This was originally added by Internet Explorer and eventually was implemented by all other browsers simply for compatibility with sites that are dependent on this behavior. Interestingly, Gecko (Firefox's rendering engine) chose to implement this in <a href="https://developer.mozilla.org/en/Mozilla%2527s_Quirks_Mode" rel="nofollow noreferrer">quirks mode</a> only, whereas other rendering engines left it on in standards mode.</p> <p>However, as of Firefox 14, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=622491" rel="nofollow noreferrer">Firefox now supports named access</a> on the <code>window</code> object in standards mode as well. Why did they change this? Turns out there's still a lot of sites that rely on this functionality in standards mode. Microsoft even <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=737760" rel="nofollow noreferrer">released a marketing demo</a> that did, preventing the demo from working in Firefox.</p> <p>Webkit has recently <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=11960" rel="nofollow noreferrer">considered the opposite</a>, relegating named access on the <code>window</code> object to quirks mode only. They decided against it by the same reasoning as Gecko.</p> <p>So… crazy as it seems this behavior is now <strong>technically safe to use in the latest version of all major browsers in standards mode</strong>. But while named access can seem somewhat convenient , <strong>it should not be used</strong>.</p> <p>Why? A lot of the reasoning can be summed up in this article about why <a href="http://c2.com/cgi/wiki?GlobalVariablesAreBad" rel="nofollow noreferrer">global variables are bad</a>. Simply put, having a bunch of extra global variables leads to more bugs. Let's say you accidentally type the name of a <code>var</code> and happen to type an <code>id</code> of a DOM node, SURPRISE!</p> <p>Additionally, despite being standardized there are still quite a few discrepancies in browser's implementations of named access.</p> <ul> <li>IE incorrectly makes the value of the <code>name</code> attribute accessible for form elements (input, select, etc).</li> <li>Gecko and Webkit incorrectly do NOT make <code><a></code> tags accessible via their <code>name</code> attribute.</li> <li>Gecko incorrectly handles multiple named elements with the same name (it returns a reference to a single node instead of an array of references).</li> </ul> <p>And I'm sure there's more if you try using named access on edge cases.</p> <p>As mentioned in other answers use <code>document.getElementById</code> to get a reference to a DOM node by its <code>id</code>. If you need to get a reference to a node by its <code>name</code> attribute use <code>document.querySelectorAll</code>.</p> <p>Please, please do not propagate this problem by using named access in your site. So many web developers have wasted time trying to track down this <em>magical</em> behavior. We really need to take action and get rendering engines to turn named access off in standards mode. In the short term it will break some sites doing bad things, but in the long run it'll help move the web forward.</p> <p>If you're interested I talk about this in more detail on my blog - <a href="https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/" rel="nofollow noreferrer">https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload