JS 使用DOM操作表单

JS 使用DOM操作表单的理解

1. 表单对象的理解

在HTML页面中一个表单对象由form>/form>标签对构成，一对标签代表一个HTML表单。JS会自动为每一个表单标签建立一个表单对象（form对象）。对表单对象的操作需要使用到对应的方法和属性。
常见的表单对象的属性如下：

属性	描述
elements	表示包含表单中所有表单元素的数组，使用索引引用其中的元素
length	返回表单中表单元素数目
method	设置或者返回将数据发送到服务器HTTP的方法
name	设置或者返回表单的名称
target	设置或者返回表单提交数据所显示的窗口或者frame
onsubmit	在提交表单之前调用事件处理方法
onreset	在重置表单之前调用事件处理方法

常见的表单对象的方法如下：

方法	描述
reset	把表单中所有的元素重置为默认值
submit	提交表单

获取表单的方式有多种（详见），常用的有两种方式
（1）直接引用表单中的name属性：ducument.formName。
（2）调用表单的ID：document.getElementById()。
例如：form name=“one” id=“one”>…/form>,
var fm=ducument.one;
var fm=document.getElementById(‘one’)

2. 表单元素对象理解

在HTML中，form标签对包含了提供给用户输入或选择数据的表单元素，JS会自动建里一个表单元素对象。表单元素按照标签可以分为三大类：input、select、textarea
其中：输入元素input包括，文本框（text）、口令框（password）、单选框（radio）、复选框（checkbox）、隐藏文本（hidden）、普通按钮（botton）、重置按钮（reset）。
选择元素包括，下拉菜单（select）、选项（option）。
文本域元素只有textarea。
不同表单元素具有的属性和方法存在差异
1）表单元素的常用属性
表单元素常用的公共属性主要有以下几个：
disabled：设置或返回是否禁用表单元素。注意：hidden 元素没有 disabled 属性。
id：设置或返回表单元素的 id 属性。
name：设置或返回表单元素的 name 属性。注意：option 元素没有 name 属性。
type：对输入元素可设置或返回 type 属性；对选择和文本域两类元素则只能返回 type 属性。
value：设置或返回表单元素的 value 属性。注意：select 元素没有 value 属性。

text 和 password 元素具有以下几个常用的私有属性：
defaultValue：设置或返回文本框或密码框的默认值；
maxLength：设置或返回文本框或密码框中最多可输入的字符数；
readOnly：设置或返回文本框或密码框是否是只读的；
size：设置或返回文本框或密码框的尺寸（长度）。

textarea 元素具有以下几个常用的私有属性：
defaultValue：设置或返回文本域元素的默认值。
rows：设置或返回文本域元素的高度。
cols：设置或返回文本域元素的宽度。

radio 和 checkbox 元素具有以下几个常用的私有属性：
checked：设置或返回单选框或复选框的选中状态；
defaultChecked：返回单选框或复选框的默认选中状态。

select 元素具有以下几个常用的私有属性：
length：返回选择列表中的选项数目；
multiple：设置或返回是否选择多个项目；
selectedIndex：设置或返回选择列表中被选项目的索引号。注意：若允许多重选择，则仅返回第一个被选选项的索引号；
size：设置或返回选择列表中的可见行数。

option 元素具有以下几个常用的私有属性：
defaultSelected：返回 selected 属性的默认值；
selected：设置或返回 selected 属性的值；
text：设置或返回某个选项的纯文本值。

2）表单元素常用的事件属性
① 表单元素的公共事件属性主要有以下两个：
onblur：当表单元素失去焦点时调用事件处理函数；
onfocus：当表单元素获得焦点时调用事件处理函数。

② text、password、textarea 元素具有以下两个私有的事件属性：
onSelect：当选择了一个 input 或 textarea 中的文本时调用事件处理函数；
onChange：当表单元素的内容发生改变并且元素失去焦点时调用事件处理函数。

③radio、checkbox、button、submit 和 reset 表单元素具有以下一个私有的事件属性。
onClick：单击复选框、单选框、普通按钮、提交按钮和重置按钮时调用事件处理函数。

3） 表单元素常用的方法
① 表单元素常用的公共方法主要有以下两个：
blur()：从表单元素上移开焦点；
focus()：在表单元素上设置焦点。

② text 和 password 元素具有以下一个私有的方法
select()：选取文本框或密码框中的内容。

③ radio、checkbox、button、submit 和 reset 表单元素具有以下一个私有的方法：
click()：在表单元素上单击鼠标左键。

④ select 元素具有以下两个私有的方法：
add()：向选择列表添加一个选项；
remove()：从选择列表中删除一个选项。

4）获取表单元素的方式
（1）引用表单对象的 elements 属性：document.formName.elements[索引值]。
（2）直接引用表单元素的 name 属性：document.formName.name。
（3）通过表单元素的 ID：调用 document.getElementById() 方法。
（4）通过表单元素的 name 属性：调用 document.getElementsByName()[表单元素索引]方法。
（5）通过表单元素标签：调用 document.getElementsByTagName()[表单元素索引]方法。
（6）通过选择器：调用 document.querySelectorAll()[表单元素索引]方法。
上述方法中，第 2～6 种方法都是比较常用的方法。

使用HTML DOM操作表单及表单元素例子