JavaScript对表单的操作（一）

表单的HTML代码

一、获得表单的引用

A、通过直接定位的方式

1.document.getElementById("");

var aa=document.getElementById("form1");

alert(aa.name);.//myform

2.document.getElementsByName("");

var aa=document.getElementsByName("myform")[0];

alert(aa.id);//form1

3.document.getElementsByTagName("");

var aa=document.getElementsByTagName("form");

alert(aa.length);//1

B、通过集合的方式来获取引用

1.document.forms[下标]

var aa=document.forms[0];

alert(aa.length)//10

2.document.forms["name"]

var aa=document.forms["myform"];

alert(aa.id);//form1

3.document.forms.name

var aa=document.forms.myform;

alert(aa.id);//form1

C、通过name直接获取(只适用于表单)

var aa=document.myform;

alert(aa.name);//myform

二、获得表单元素的引用

A、直接获取

1.document.getElementById("")

var names=document.getElementById("names");

alert(names.name);//names

2.document.getElementsByName("");

var ag=document.getElementsByName("age")[0];

alert(ag.name);//age

3.document.getElementsByTagName("");

var oName=document.getElementsByTagName('input')[0];

alert(oName.name);//names

B、通过集合的方式来获取

1. 表单元素.elements--获得表单里面所有元素的集合

alert(document.getElementById("form1").elements.length);//10

2.表单元素.elements[下标]

alert(document.forms[0].elements[2].name);//sex

3.表单元素.elements["name"]

alert(document.myform.elements["sex"].length)//2

4.表单元素.elements.name

alert(document.myform.elements.school.name);//school

C、通过name形式

表单对象.name

alert(document.myform.age.value);//22

三、表单元素共同的属性和方法

A、获取表单元素的值

表单元素对象.value--获取或是设置值

alert(document.myform.age.value=18);//18

B、属性

disabled--获取或设置表单控件是否禁用 true false

var names=document.forms[0].elements[0].disabled=true;

var school=document.forms[0].elements[7].disabled=true;

姓名和毕业院校变成了灰色，不可选择

form--指向包含本元素的表单的引用

var age=document.forms[0].elements.age.form;

alert(age.name);//myform

C、方法

blur()--失去焦点

focus()--获得焦点

var aa=document.forms.myform.elements.names.focus();