JS document.getElementById is not a function if you have a form with name="document"

Question

I had a strange problem with my site. Suddenly, on a page I got the JS error document.getElementById is not a function. The problem was that I had a form with name="document".

It seems that if a form has the attribute name set, a variable in Javascript with the same name is set.

Where can I find the specs for this ?

Answer 1

Seems like you're right. Document supports named properties.

@Andreas has also pointed out a resource that mentions this:http://w3c.github.io/html/browsers.html#named-access-on-the-window-object

6.3.3. Named access on the Window object: "The Window interface supports named properties. The supported property names at any moment consist of the following, in tree order, ignoring later duplicates: ... the value of the name content attribute for all a, applet, area, embed, form, frameset, img, and object elements in the active document that have a non-empty name content attribute..." – Andreas

Check this out: https://html.spec.whatwg.org/multipage/dom.html#dom-document-forms

The Document interface supports named properties. The supported property names of a Document object document at any moment consist of the following, in tree order according to the element that contributed them, ignoring later duplicates, and with values from id attributes coming before values from name attributes when the same element contributes both:

the value of the name content attribute for all applet, exposed embed, form, iframe, img, and exposed object elements that have a non-empty name content attribute and are in a document tree with document as their root;

the value of the id content attribute for all applet and exposed object elements that have a non-empty id content attribute and are in a document tree with document as their root; and

the value of the id content attribute for all img elements that have both a non-empty id content attribute and a non-empty name content attribute, and are in a document tree with document as their root.

To determine the value of a named property name for a Document, the user agent must return the value obtained using the following steps:

Let elements be the list of named elements with the name name that are in a document tree with the Document as their root.

There will be at least one such element, by definition.

If elements has only one element, and that element is an iframe element, and that iframe element's nested browsing context is not null, then return the WindowProxy object of the element's nested browsing context.

Otherwise, if elements has only one element, return that element.

Otherwise return an HTMLCollection rooted at the Document node, whose filter matches only named elements with the name name.

Named elements with the name name, for the purposes of the above algorithm, are those that are either:

applet, exposed embed, form, iframe, img, or exposed object elements that have a name content attribute whose value is name, or applet or exposed object elements that have an id content attribute whose value is name, or img elements that have an id content attribute whose value is name, and that have a non-empty name content attribute present also. An embed or object element is said to be exposed if it has no exposed object ancestor, and, for object elements, is additionally either not showing its fallback content or has no object or embed descendants.

Answer 2

The behavior is defined in section 6.3.3 Named access on the Window object of the HTML 5 specification:

The child browsing context name property set consists of the browsing context names of any child browsing context of the active document whose name is not the empty string, with duplicates omitted. The Window interface supports named properties. The supported property names at any moment consist of the following, in tree order, ignoring later duplicates:

• the child browsing context name property set.
• the value of the name content attribute for all <a>, <applet>, <area>, <embed>, <form>, <frameset>, <img>, and <object> elements in the active document that have a non-empty name content attribute, and
• the value of the id content attribute of any HTML element in the active document with a non-empty id content attribute.