转载

DOM之表单和表格的使用

DOM 表单, 表格, 下拉框和其他标签包含额外的简化访问方式. 能够简化代码和可读性, 非常有用.

Table: 表格

表格引用到行, 行引用到单元格:

<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>

rows/cells 集合在一个表格包含另外一个表格时, 更方便的使用. 在这个例子中, outerTable.getElementsByTagName('TD') 会返回内部表格的单元格, 我们可能需要. 属性 table.rows/row.cells仅参考这个完整的table.

详细查看 HTMLTableElement 和 HTMLTableRowElement .

Form: 表单

一个有效的表单, 通过他的名称或者索引(document.forms[name/index]), 可以访问它.
form.elements[name/index] 属性引用他的元素.

DOM之表单和表格的使用

例如:

<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>

相同名称的多个元素也可访问在这个例子中, 相应的elements[name]返回一个集合:

<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>

嵌套中不能依赖引用. 一个元素可以在form的最深处, 但是仍旧可以直接使用form.elements来访问.

详细查看: HTMLFormElement .

`form.name` 可以使用, 但是有BUG.

表单元素可以通过form[index/name] 来访问.

在所有浏览器中都是可以执行的. 但是在火狐中, 我们移除一个元素时, 他仍旧可以通过from[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>

在上面这个例子中, 一个元素被移除了, 但是form[name]仍旧引用到他. 因此通常来讲form.elements[name]是更可靠的长时间使用方式.

Form elements : 表单元素

form.element来引用表单的元素.

<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>

可以详细的查看 HTMLInputElement 和元素另外的类型

Select

SELECT元素提供了访问option的方式:

<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>

作为一个元素, 我们可以使用两种方式: 名称的 options['blues'] 和索引的options[0].

SELECT提供了selectedIndex属性来访问select中选中的option. 如果select不是多选择性的, 是非常有用的.

下面例子演示了怎么样获取选中的值:

<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>

可以详细看: HTMLSelectElement .