1.访问form元素

1.1获得表单

oForm = document.getElementById("myForm");
oForm = document.forms["myForm"];
oForm = document.forms[0];

1.2表单元素

通过表单字段:oForm.elements[0];
通过名称:oForm.text1;oForm.["he is a boy"];//每个表单字段成为表单的属性,通过name值访问

1.3表单字段共性

disabled属性
form属性:返回该表单字段的父form对象
blur();focus();blur事件;focus事件

1.4表单提交和重置

submit();reset();//submit方法不触发submit事件,reset方法触发reset事件;

2.编写文本框 input/textarea

2.1获取/更改文本值

var oText = document.getElementById("theInput");
oTextV = oText.value; //文本节点用data属性,option用text属性
oTextL = oText.length;

2.2选择文本

oText.focus();
oText.select();//使用之前该文本必须已经获得焦点;

2.3文本事件

focus;blur;change;select;
change和blur都发生时,先发生change事件,后发生blur事件;

2.4自动选择

在onfocus中使用this.select();

3.编写列表框和组合框

3.1访问 //通过option的text或value属性

oListBox = oForm.select;
oListBox.options[1].text//oListBox.options[2].value;

3.2更改

oListBox.options[1].text = "xxx";//更改显示文本
oListBox.options[1].value = http://www.mamicode.com/xxx;//更改option[1]的value属性的值
oListBox.selectedIndex属性可得当前被选中的option索引,选中多项返回第一个索引
oListBox.options[1].select属性可返回一个boolean显示某选项是否被选中

3.3添加选项

用DOM创建元素,创建文本节点,生成子节点的方法

3.4删除选项

oListBox.options[1]=null;
oListBox.remove(1);
//若要删除整个列表,由于删除后索引改变,从高向低删除最好

3.5移动选项

var oOption = oListBox1.option[4];
oListBox2.appendChild(oOption);

3.6重新排序

上移:oListBox.insertBefore(oListBox.options[i],oListBox.options[i-1]);
下移:oListBox.insertBefore(oListBox.options[i+1],oListBox.options[i]);

4 编写单选/复选框

4.1获得单选框/复选框的值 value属性
4.2判断选中项:checked属性,为布尔值
click()方法可改变其是否被选中;

5 表单验证

5.1在事件发生后验证:submit();
5.2在事件发生时验证:onchange;
5.3在事件发生前验证:onkeypress="return xxxxxxx();" //xxxxxx()中写明样式,否则不予输入;

javascript 中表单元素的操作