DOM form对象

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1.HTML DOM的Form元素：

找到表单对象：var form=document.forms[i/name]

找到表单中的元素: var elem=form.elements[i/name]

如果找有name属性的元素可简写为: form.name

form对象的onsubmit事件：在提交表单前之前自动触发，主要验证或取消提交

form对象都有submit()方法：专用于手动提交表单

form.reset();//重填

form.submit();//手动提交

onfocus---》元素获取焦点事件

onblur------》元素失去焦点事件

表单中的元素:elem.focus();//使用代码让元素获得焦点

elem.blur();//失去焦点

1.在绑定事件处理函数的内部,尽量不要使用外部的变量，一旦使用,就会形成闭包,后果被闭包保护的DOM对象无法从内存中真正删除会造成内存泄露

例如:

<!DOCTYPE HTML>
<html>
<head>
<title>表单提交验证</title>
<meta charset="utf-8" />
<style>
.hintText{color:#aaaaaa; font-style:italic; }
.normalText{color:#000000;}
.error{background-color:pink}
</style>
<script src="4.js">
</script>
</head>
<body>
<h2>发表留言</h2>
<form name="msgForm">
姓名：<input name="userName" class="hintText"
value="请输入您的姓名"/><br />
内容：<textarea name="content" class="hintText" style="resize:none"
rows="5" cols="30">请输入留言内容</textarea><br />
<label><input type="checkbox"/>我已阅读了《常见问题列表》</label><br/>
<input type="button" disabled="disabled" value="提交"/>
</form>
</body>
</html>

复制代码

下面是js文件:

window.onload=function(){
//找到表单对象,保存在form变量中
var form=document.forms["msgForm"];
//获得姓名文本框对象,保存在变量txtName中
var txtName=form.userName;
//获得回复内容文本框,保存在变量txtContent中
var txtContent=form.content;
//为txtNmae对象绑定获得焦点事件处理函数
txtName.onfocus=function(){//this-->txtName
// 如果txtName的内容是默认字符 ,
if(this.value=="请输入您的姓名"){
// 就清空txtName的内容,在value中
this.value="";
//去掉txtName的样式类
this.className="";
}
}
//为txtName对象绑定失去焦点事件,处理函数
txtName.onblur=function(){
// 如果txtName只由空字符组成或txtName的内容刚好又等于"请输入您的姓名"
if(/^(s*|请输入您的姓名)$/.test(this.value)){//this-->txtName
//txtName的内容设置为"请输入您的姓名"
this.value="请输入您的姓名";
//设置txtName的样式类为"hintText"
this.className="hintText";
}
}
//为txtContent对象绑定获得焦点事件处理函数
txtContent.onfocus=function(){
// 如果txtContent的内容是默认字符 ,
if(this.value=="请输入留言内容"){
// 就清空txtContent的内容,在value中
this.value="";
//去掉txtContent的样式类
this.className="";
}
}
//为txtContent对象绑定失去焦点事件,处理函数
txtContent.onblur=function(){
// 如果txtContent只由空字符组成或txtContent的内容刚好又等于"请输入您的姓名"
if(/^(s*|请输入留言内容)$/.test(this.value)){
//txtContent的内容设置为"请输入您的姓名"
this.value="请输入留言内容";
//设置txtContent的样式类为"hintText"
this.className="hintText";
}
}
var chb=form.elements[form.elements.length-2];
var btn=form.elements[form.elements.length-1];
//为chb绑定onclick事件处理函数
chb.onclick=function(){
// 将btn的disabled属性设置为和chb的checked属性相反
btn.disabled=!this.checked;
}
//为btn绑定onclick事件处理函数 //this-->btn
btn.onclick=function(){
var txtName=form.userName;//防止闭包
var txtContent=form.content;//防止闭包
// 如果txtName的内容只由空字符组成或txtName的内容刚好又等于"请输入您的姓名"
if(/^(s*|请输入您的姓名)$/.test(txtName.value)){
txtName.focus();//就让txtName对象获得焦点
txtName.className="error";
}else if(/^(s*|请输入留言内容)$/.test(txtContent.value)){
//否则，如果txtCotent的内容只由空字符组成或txtContent的内容刚好又等于"请输入留言内容"
txtContent.focus();//就让txtContent获得焦点
txtContent.className="error";
}else{// 否则
document.forms["msgForm"].submit()//提交form
}
}
}

复制代码

下面是页面效果:

如果在相应表格中什么信息都不输入,或者输入默认信息,表单是不会提交的。

例如,我这在姓名表格中输入信息,内容表格中什么都不输,其效果如下：

2. 创建和删除节点：-->核心DOM

1. 创建单个节点：

1. 创建指定名称的空节点对象：

var newElem=document.createElement("标签名");

比如：var a=document.createElement("a");

<a></a>

2. 设置新对象的关键属性：

比如：a.innerHTML="go to weixin";

a.href="http://weixin.com";

<a href="http://weixin.com">go to weixin</a>

3. 将a加入指定父元素下:

1. 追加：parent.appendChild(newElem);

2. 在之前插入：parent.insertBefore(newElem,已有元素)

3. 替换：parent.replaceChild(newElem,被替换的元素);

例如:

<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
/*使用 HTML DOM 的方式实现联动菜单*/
var categories=[
{"id":10,"name":'男装',"children":[
{"id":101,"name":'西装'},
{"id":102,"name":'休闲'},
{"id":103,"name":'商务'}
]},
{"id":20,"name":'女装',"children":[
{"id":201,"name":'短裙'},
{"id":202,"name":'连衣裙'},
{"id":203,"name":'牛仔裤',"children":[
{"id":2031,"name":'长裤'},
{"id":2031,"name":'超短裙'},
{"id":2031,"name":'七分裤'}
]},
]},
{"id":30,"name":'童装',"children":[
{"id":301,"name":'裤子'},
{"id":302,"name":'套装',"children":[
{"id":3021,"name":"0-3岁"},
{"id":3021,"name":"3-6岁"},
{"id":3021,"name":"6-9岁"},
{"id":3021,"name":"9-12岁"}
]},
{"id":303,"name":'手套'}
]}
];
function createSelect(arr){//根据给定数组创建select
//创建空的select元素,保存在变量sel中
var sel=document.createElement("select");
//在sel中添加第一个option,内容为"-请选择-"
sel.add(new Option("-请选择-"));//用这个方法既能创建网页内容,又能创建value
//遍历arr数组中每个商品类别的对象
for(var i=0;i<arr.length;i++){
// 在sel中新添加一个option,内容为当前对象的name属性值,value为当前对象的id值
sel.add(new Option(arr[i].name,arr[i].id));
}
//给sel绑定onchange事件
sel.onchange=function(){//js中动态绑定的事件,
//事件函数的this,就指当前select对象
//删除当前select之后的所有兄弟select
while(this.nextSibling!=null){
this.nextSibling.parentNode.removeChild(this.nextSibling);
}
//获得当前选中项的下标,-1修正,保存在i中
var i=this.selectedIndex-1;
//如果i不等于-1
if(i!=-1){//说明选的不是"请选择"
if(arr[i].children){//如果i位置的对象的children属性有效
// 再次调用createSelect方法,传入arr数组中i位置对象的children数组(继续创建下级select)
createSelect(arr[i].children);
}
}
}//找到id为category的div,追加sel
document.getElementById("category").appendChild(sel); //注意getxxx与querySelector差别
}
window.onload=function(){
createSelect(categories);
}
</script>
</head>
<body>
<div id="category"></div>
</body>
</html>