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

forms, javascript, variables

Solution

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.

Problem

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 ?

Original source