一、获取表单元素
1.通过表单id属性
2.通过表单在表单集合中的索引
document.forms[formIndex]; //bom
document.forms["formName"]; //bom
3.通过表单name属性直接访问
document.formName
二、访问表单域（字段）
1.通过表单域id属性
2.通过表单域所在的索引
frm.elements[eleIndex]; //可用于遍历表单域
3.通过表单域的name属性
frm.elements["name"];//得到名为name的表单域
4.通过表单域id属性或name属性直接访问
frm.eleName;//直接用名称得到表单域
frm[“my name”];//得到name属性值有空格的表单域
frm[eleIndex];//得到索引为eleIndex的表单元素
三、表单元素常用的属性和方法
disabled：是否可用，true 不可用,false 可用
form：得到表单
blur()：使表单域失去焦点。
focus()：使表单得到焦点。
onblur事件：失去焦点时触发，并调用onblur()函数。
onfocus事件：得到焦点时触发，并调用onfocus()函数。
四、列表框、下拉框对象
列表框对象.options，得到所有option选项的集合
listbox.options[optIndex].text;//获得文本
listbox.options[optIndex].value;//获得值
listbox.options[optIndex].selected;//获得该项是否被选中
listbox.selected; //选项是否被选中，选中，返回true，否则，返回false
multiple=’multiple’设为多选。
五、复选框和单选钮
checked属性：是否被选中，选中，返回true，否则，返回false
click()：模仿点击，会触发click事件，改变选择状态。
对于复选框，可以进行遍历操作。
通过表单对象.name值，可返回复选钮的集合(等价于getElementsByName())
六、掌握表单验证的方式
1、阻止提交<form onsubmit=”return check()”>
函数check() 返回true，表示提交表单，否则，禁止提交表单
winkie2、表单提交调用表单对象.submit()方法提交
七．表单常用操作范例
1.获取和设置文本域的内容
例：求和
function getSum(){
//获取表单对象
var theForm=document.forms["myForm2"];
//计算和，并赋值给第3个文本框
theForm.elements["sum"].value=
eval(theForm.elements["x"].value)+eval(theForm.elements["y"].value);
}
2.最常见的访问表单字段的方法
最简单常用的访问表单元素的方法自然是ElementById()
例：
<input type="text" id="count" value="" />
var ElementById("count ").value
这种方法无论表单元素处于那个表单中甚至是不在表单中都适用，一般情况下是我们用JS访问表单元素的首选.
鉴于ElementById比较长，你可以用如下函数代替它:
function $(id){
ElementById(id);
}
把这个函数放在共有JS库中，在jsp页面通过如下方法引用它:
<head>
<title>添加资源页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/check.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css" type="text/css" />
</head>
此后你就可以直接使用$访问表单元素中的内容:
var name=$("name").value;
3.获取表单值并将值赋给数组
var ElementsByTagName("input");//对象数组
var strData="";
//对表单中所有的input进行遍历
for(var i=0;i<list.length && list[i];i++){
/
/判断是否为文本框
if(list[i].type=="text") { //type=="text" 表示文本框
strData +=list[i].value;
alert(strData);
}
}
4.表单域字段的共性
以下是所有表单字段(除了隐藏字段)
Id表单域唯一标识
name表单域名称
disabled可以用来获取或设置表单控件是否被禁用.
form特性用来指向字段所在的表单.
blur()方法使表单字段失去焦点.
focus()方法使表单字段获得焦点.
当字段失去焦点是，发生blur事件，执行onblur事件处理程序.
当字段获取焦点时，发生focus事件，执行onfocus事件处理函数.
例：当页面载入时将焦点放在第一个字段
在body代码中如此书写:
<body onload=“focusOnFirstElm()”>
JS函数如下书写:
Fucntion focusOnFirstElm(){
document.forms[0].elements[0].focus();
}
如果第一个字段不是隐藏字段此方法就是凑效的，如果是的话把elements的下标改成非隐藏字段的下标即可.
5.控制表单只被提交一次
由于Web的响应问题，用户有可能会点击多次提交按钮从而创建重复数据或是导致错误，可以使用JS对提交按钮进行设置以让表单只被提交一次。
<input type=“submit” value=“提交”onclick=“this.disabled=true；this.form.submit()”/>
这里在点击提交按钮时执行了两句JS代码，一次是this.disabled=true；这是让提交按钮被禁用；一次是this.form.submit()这是提交这个按钮所在的表单。
7.检查用户在表单元素中的按键
为控件添加onkeydown事件处理，然后在函数查看keyCode，就能知道用户的按键，代码如下：
<input type="text" name="test" value="" onkeydown="testkey(this,event)"/>
function testkey(obj,event){
alert(event.keyCode);//显示按键代码
}
这种技巧在改善用户体验如按回车键提交表单时很常用。
DOM 模型
一、概述
DOM(Document Object Module即文档对象模型)，它定义了操作文档对象的接口。
在这个模型中，一个文档被看成是结构化的数据，对于XML就像一颗倒立的树的结构，树中的每个节点对应一个XML表记，都是一个对象。 在Ajax中，DOM模型是最核心的结构。是所有Ajax开发的基础.如果没有DOM 模型，就没有办法在客户端改变页面的内容，所有的局部刷新、异步请求也就无从实现，只有熟练掌握了DOM模型的相关技术，才算真正掌握了Ajax开发精髓
DOM模型是从DHTML发展而来的。它经历了DOM1,DOM2,DOM3. DOM1主要针对HTML文档，而DOM2,DOM3完整定义了对XML文档对象的操作.
DHTML 即动态HTML，它是将HTML 元素看作对象，并通过定义对象的接口来动态改变这些对象的状态。
DOM模型是从DHTML发展而来的，但它对模型作了根本性的改变。在DMO2及其后续版本中，根据XML文档结构的性质制定了一系列标准接口，也同样适用于HTML.然而，在IE浏览器中，一些结构化标记在DOM模型中不能很好的支持，如下拉列表，表格等，需要使用DOM1来对它们进行操作。
二、节点
1. 节点概念:
在DOM模型中，整个文档是一颗倒立的树。树的根节点是document对象，表示整个文档对象，并且它包含一个子节点<html>.例如：
<html>
<head>
<title> new document </title>
</head>
<body>
Hello Ajax福山沙纪
</body>
</html>
在DOM模型中，整个文档是由层次不同的多个节点组成的，每个节点都可以看成是一颗倒立的树，整个文档是一个递归结构。
李跃程2. 节点类型
有三种类型的节点：元素节点，文本节点和属性节点
在XML(HTML)文档中，不仅每个闭合的标记是一个节点，而且闭合标记中的文本、标记内的属性也是节点，分别称为元素节点，文本节点和属性节点。例如：理论与改革
<Label for=”checkBox” >姓名</Label>.
整个内容构成了标记为Label 的元素节点,
for=”checkBox”为一个属性节点.
姓名为文本节点
属性节点和文本节点都是标记为Label的子节点
三、处理DOM中的节点
1.直接引用节点
1.1. ElementById(elementID )
在HTML文档中，每个标记都有一个id属性，而且具有唯一性，所以可以用该元素(标记)的id来获得其引用.
1.2. ElementsByTagName(tagName )
获得指定标记元素的集合，返回一个数组
1.3. ElementsByName(elementName )
获得指定名称的标记元素的集合，返回一个数组.如访问一组名称为name=”hoby”的的<input type=”checkBox” name=”hoby”>标记.例如
<form action="">
<input type="checkbox" name="hoby" value="bridge" />桥牌
<input type="checkbox" name="hoby" value="game" />游戏
滚山虫
<input type="checkbox" name="hoby" value="swimming" />游泳
<br />
input type="button" value="获得爱好" onclick="parseXml()" />
</form>
//遍历hoby元素，hobyRef 为一个数组
var ElementsByName("h oby");
alert(hobyRef.length);//显示元素个数
for(var i=0;i<hobyRef.length;i++){
if(hobyRef[i].checked){//如果被选择，则显示
alert(hobyRef[i].value);
}
}85sss
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议