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] 属性引用他的元素.
例如:
<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.
总结
TABLE可以直接访问他的行和单元格
FORM表单使用
document.forms[name/index]. 表单元素使用form.elements[name/index].SELECTselect.options[name/index]直接访问option. 选中的option的索引:select.selectedIndex.
这些方法比起一般的DOM搜索方式更方便.