Home » Tutorial » Document and Events » DOM

More references in forms and tables

Ilya Kantor
  1. Table
  2. Form
  3. Form elements
    1. Select
  4. Summary

DOM forms, tables, selects and other elements contain additional links to simplify navigation.

They are useful to keep the code shorter and smarter.

Table

A table references it’s rows, and rows reference cells:

<table>
  <tr> <td>one</td>   <td>two</td>  </tr>
  <tr> <td>three</td> <td>four</td> </tr>
</table>

<script>
var table = document.body.children[0]

alert(table.*!*rows*/!*[0].*!*cells*/!*[0].innerHTML) // "one"
</script>

The rows/cells collection become even more convenient when a table can contain another table. In this case outerTable.getElementsByTagName('TD') would return cells from inner tables, which we may not need. Properties table.rows/row.cells only reference this exactly table.

The specification: HTMLTableElement and HTMLTableRowElement.

Form

  • A form is available by it’s name or index in document.forms[name/index].
  • The form.elements[name/index] property references it’s elements.

For example:

<body>
<form name="my">
  <input name="one" value="1">
  <input name="two" value="2">
</form>

<script>
var form = document.forms.my // also document.forms[0]

var elem = form.elements.one  // also form.elements[0]

alert(elem.value) // "one"
</script>
</body>

Multiple elements with same name are also accessible.
The corresponding elements[name] returns a collection in this case:

<body>
<form>
  <input type="radio" name="*!*age*/!*" value="10">
  <input type="radio" name="*!*age*/!*" value="20">
</form>

<script>
var form = document.forms[0]

var elems = form.elements.age

alert(elems[0].value) // 10
</script>
</body>

References do not depend on nesting. An element can be burried deep inside the form, but still available directly using form.elements.

The specification: HTMLFormElement.

`form.name` also works, but bugs

Form elements can be accessed like form[index/name].

It works in all browsers. But in Firefox, when you remove the element, it still can be accessed as form[name]:

<form name="f"> <input name="text"> </form>

<script>
var form = document.forms.f
var input = form.text // input

form.removeChild(input) // remove input

alert(form.elements.text) // => undefined (correct)
*!*
alert(form.text) // => element, still accessible in Firefox!
*/!*
</script>

In the example above, an element is removed, but form[name] still references it. So, generally it’s more reliable to use longer form.elements[name] syntax.

Form elements

Form elements reference their form as element.form.

<body>
<form>
  <input type="text" name="*!*surname*/!*">
</form>

<script>
var form = document.forms[0]

var elem = form.elements.surname

alert(elem.form == form) // true
</script>
</body>

See also the specification about HTMLInputElement and other element types.

Select

A SELECT element provides access to it’s options:

<form name="form">
  <select name="genre">
    <option name="blues" value="blues">Soft blues</option>
    <option name="rock" value="bock">Hard rock</option>
  </select>
</form>

<script>
var form = document.body.children[0]

alert(form.elements['genre'].options[0].value) // blues
</script>

As with elements, we can use both name: options['blues'] and index: option[0].

The SELECT also provides selectedIndex property which keeps the index of the selected option. Useful if the select is not multiple.

The example below demonstrates how to get a selected value:

<form name="form">
  <select name="genre">
    <option name="blues" value="blues">Soft blues</option>
    <option name="rock" value="rock">Hard rock</option>
  </select>
</form>

<script>
var form = document.forms.form

var select = form.elements.genre
var value = select.options[select.selectedIndex].value

alert(value) // blues
</script>

The specification: HTMLSelectElement.

Summary

TABLE
Direct access to rows and cells.
FORM
Forms are in document.forms[name/index]. Elements are in form.elements[name/index].
SELECT
Direct access to options by select.options[name/index]. The index of the selected option: select.selectedIndex.

These methods are very convenient compared to general DOM searching machinery.

Tutorial