Best Practice Access form elements by HTML id or name attribute

Question

There are many (too many) different ways to do the same task, as any seasoned JavaScript developer is aware. Consider the following text field as an illustration:

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

In JavaScript, there are several ways to access this:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

Methods [1] and [3] are well documented in the Mozilla Gecko documentation, but neither are ideal. [1] is just too general to be useful and [3] requires both an id and a name (assuming you will be posting the data to a server side language). Ideally, it would be best to have only an id attribute or a name attribute (having both is somewhat redundant, especially if the id isn't necessary for any css, and increases the likelihood of typos, etc).

[2] seems to be the most intuitive and it seems to be widely used, but I haven't seen it referenced in the Gecko documentation and I'm worried about both forwards compatibility and cross browser compatiblity (and of course I want to be as standards compliant as possible).

So what's best practice here? Can anyone point to something in the DOM documentation or W3C specification that could resolve this?

Note I am specifically interested in a non-library solution (jQuery/Prototype).

Answer 1

It is a good idea to use the form object itself to retrieve named components contained in a form.

Use getElementById and the element's id to retrieve any element in the DOM tree that you might occasionally find within a form.