1 DOM编程
1.1 概念
DOM（document Object Model）文档对象模型编程。
全称Document Object Model，即文档对象模型。DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。
1.2 查询标签对象
通过document对象获取，document代表一个html页面#通过document对象的集合
作用： 获取多个或者同类的标签对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过document的集合获取标签对象</title>
</head>
<body>
<a href=""></a>
<form><img src=""/><a href=""></a><img src="" /></form>
<form><img src=""/><a href=""></a></form>
</body>
<script type="text/javascript">
/*
all: 获取所有标签对象
forms： 获取form标签对象
images: 获取img标签对象
links: 获取a标签对象
*/
//var nodeList = document.all; //返回标签对象数组
//var nodeList = document.forms; //返回标签对象数组
//var nodeList = document.images; //返回对象数组
var nodeList = document.links;//返回对象数组
//alert(nodeList.length);
//遍历标签对象
//nodeName：获取标签名称
for(var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
</script>
</html>#通过关系查找标签对象
父节点： parentNode属性子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过关系查询标签对象</title>
</head>
<!--
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性
注意：
1）childNodes属性,firstChild属性,lastChild属性获取的子节点包含了以下的元素：
a)标签 1
b)空格换行 3
c)html注释 8
在子节点中筛选出标签出来呢？ 可以使用 nodeType属性： 节点类型
取出nodeType值为1的节点，就是标签对象
-->
<body>
<form><a href="">超链接</a><!--html注释 --><input type="text"/><input type="button" /></form>
<form><a href="">超链接</a><input type="type"/></form>
</body>
<script type="text/javascript">
/*
//得到a标签（获取第一个a标签对象）
var aNode = document.links[0];
//alert(aNode.nodeName);
//得到父标签
var formNode = aNode.parentNode;
alert(formNode.nodeName);
//得到form的子节点,返回数组
var nodeList = formNode.childNodes;
alert(nodeList.length);
for(var i=0;i<nodeList.length;i++){
//筛选出标签对象
if(nodeList[i].nodeType==1){
document.write(nodeList[i].nodeName+"，节点类型："+nodeList[i].nodeType+"<br/>");
}
}
//第一个子节点
var firstChild = formNode.firstChild;
alert(firstChild.nodeName);
//最后一个子节点
var lastChild = formNode.lastChild;
alert(lastChild.nodeName);
*/
var aNode = document.links[1];
//得到下一个兄弟节点
var next = aNode.nextSibling;
alert(next.nodeName);
//得到上一个兄弟节点
var previous = next.previousSibling;
alert(previous.nodeName);
</script>
</html>#通过document方法查询标签对象
document.getElementById("id属性值"); 最常用documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
document.getElementsByTagName("标签名") 获取相同标签名的标签列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过document方法查询标签对象</title>
<script type="text/javascript">
/*
1)document.getElementById("id属性值"); 最常用
注意：
1）使用该方法获取的标签一定要有id属性
2）在同一个html页面中不要出现两个同名的id
2)documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
注意：
1）使用该方法获取的标签一定要有name属性
3)document.getElementsByTagName("标签名") 获取相同标签名的标签列表
*/
function getValue(){
//获取输入框的内容
//1.得到输入框标签对象
//var userName = document.getElementById("userName");
//2.返回的是标签数组
//var userName = document.getElementsByName("user")[0];
//3.返回标签对象数组
var userName = document.getElementsByTagName("input")[0];
//获取标签对象的value属性值
alert(userName.value);
}
</script>
</head>
<body>
用户名：<input type="text" id="userName" name="user" οnblur="getValue()"/>
</body>
</html>1.3 修改标签对象属性
常用的需要修改的属性：innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html
innerText: 设置标签内容的文本
value属性： 修改value属性值。 input type="text"
src属性： 修改图片的src属性。 <img src=""/>
checked属性：修改单选或多项的默认值。 <input type="radio/checked" checked=""/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置标签对象的属性</title>
<!--
经常修改的属性：
innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html代码
value属性： 修改value属性值。 input type="text"
src属性： 修改图片的src属性。 <img src=""/>
checked属性：修改单选或多项的默认值。(选择的当前状态) <input type="radio/checked" checked=""/>
false: 没选中 true： 已选中
-->
</head>
<body>
<span id="mySpan"></span>
<input type="text" id="userName" value="4-12位字母或数字"/>
<img src="4.jpg" width="300px" height="200px"/><input type="button" value="切换图片" οnclick="changeImg()"/>
<hr/>
<input type="button" value="全选" οnclick="qunaxuna()"/>
<input type="checkbox" value="篮球" name="hobit"/>篮球
<input type="checkbox" value="足球" name="hobit"/>足球
<input type="checkbox" value="羽毛球" name="hobit"/>羽毛球
</body>
<script type="text/javascript">
//获取span标签对象
var mySpan = document.getElementById("mySpan");
//设置标签内的HTML内容， 在IE和火狐可以
mySpan.innerHTML = "<h3>标题</h3>";
/*innerText在IE可以，在火狐不行*/
//mySpan.innerText="标签";
//获取input对象
var userName = document.getElementById("userName");
userName.value = "";
function changeImg(){
//得到标签对象
var img = document.getElementsByTagName("img")[0];
img.src="mm.jpg";
}
function qunaxuna(){
/*
var lq = document.getElementsByName("hobit")[0];
//alert(lq.checked);
//设置状态
lq.checked=true;
*/
var hList = document.getElementsByName("hobit");
for(var i=0;i<hList.length;i++){
hList[i].checked = true;
}
}
</script>
</html>
1.4 标签对象方法
添加相关的：document.createElement("标签名") 创建节点对象
setAttribute("name","value"): 设置节点的属性
插入相关的：
appendChild("标签对象") ; 添加子节点对象
insertBefore("新标签对象","指定的对象") 在指定的对象前面添加子节点对象
删除：
removeChild("标签对象"); 删除子节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签对象的方法</title>
<!--
添加相关的：
document.createElement("标签名") 创建节点对象
setAttribute("name","value"): 设置节点的属性
插入相关的：
appendChild("标签对象") ; 添加子节点对象
insertBefore("新标签对象","指定的对象") 在指定的对象前面添加子节点对象
删除：
removeChild("标签对象"); 删除子节点
-->
<script type="text/javascript">
//添加按钮
function addItem(){
//1.创建一个按钮对象
var input = document.createElement("input"); // <input />
//2.设置属性
input.setAttribute("type","button"); // <input type="button"/>
input.setAttribute("value","新按钮"); // <input type="button" value="新按钮"/>
//3.在html页面中插入这个新建的按钮对象
//3.1 得到body对象
var bodyNode = document.getElementsByTagName("body")[0];
//3.2 把新的按钮对象加入到body对象的子节点中(加到最后一个)
bodyNode.appendChild(input);
/*
//3.2 把新的按钮对象加入到btn按钮的前面
var btn = document.getElementById("btn");
//参数一： 新的对象 参数二： 插入到前面的对象
bodyNode.insertBefore(input,btn);
*/
}
function delItem(){
//找到需要删除的节点对象
//获取最后一个子标签
var bodyNode = document.getElementsByTagName("body")[0];
var lastChild = bodyNode.lastChild;
//删除子标签
bodyNode.removeChild(lastChild);
}
</script>
</head>
<body>
<input type="button" value="添加" οnclick="addItem()"/><input type="button" value="删除" οnclick="delItem()"/><input id="btn" type="button" value="按钮"/>
</body>
</html>
2 正则表达式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
<script type="text/javascript">
//创建正则表达式： var 变量 = /正则规则/;
/*
[a-z]: 表示匹配字母
* : 0或多个元素
+ : 1个或多个元素
? : 0或1个元素
{n,m} 大于n,小于m的个数
正则方法：
test（）： 用于匹配指定的字符串. true：表示匹配成功 ； false; 表示匹配失败
注意：
在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！
如果需要和java一样完全匹配，需要添加边界符号
开始标记： ^
结束标记： $
*/
var str = "12abc";
var reg = /^[0-9]{2}$/;
if(reg.test(str)){
alert("成功");
}else{
alert("失败");
}
</script>
</head>
<body>
</body>
</html>
用处：验证表单输入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用正则校验表单的输入</title>
<!--
用户名： 4-14位字母或数字
密码： 6-16位的字母或数字
密码和确认密码输入一致
邮箱符合规则： 字母或数字@字母或数字.(com/cn/net/com.cn)
-->
<script type="text/javascript">
function checkName(){
var userName = document.getElementById("userName").value;
//使用正则校验
var reg = /^[a-zA-Z0-9]{4,14}$/;
var nameTip = document.getElementById("nameTip");
if(reg.test(userName)){
//成功
nameTip.innerHTML = "用户名正确".fontcolor("green");
return true;
}else{
//失败
nameTip.innerHTML = "用户格式有误".fontcolor("red");
return false;
}
}
function checkPwd(){
var userPwd = document.getElementById("userPwd").value;
//使用正则校验
var reg = /^[a-zA-Z0-9]{6,16}$/;
var pwdTip = document.getElementById("pwdTip");
if(reg.test(userPwd)){
//成功
pwdTip.innerHTML = "密码正确".fontcolor("green");
return true;
}else{
//失败
pwdTip.innerHTML = "密码有误".fontcolor("red");
return false;
}
}
function checkRePwd(){
var userPwd = document.getElementById("userPwd").value;
var repwd = document.getElementById("repwd").value;
var repwdTip = document.getElementById("repwdTip");
if(userPwd==repwd){
repwdTip.innerHTML = "两次输入正确".fontcolor("green");
return true;
}else{
repwdTip.innerHTML = "两次输入密码不一致".fontcolor("red");
return false;
}
}
function checkEmail(){
var email = document.getElementById("email").value;
//使用正则校验（： 字母或数字@字母或数字.(com/cn/net/com.cn) ）
var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
var emailTip = document.getElementById("emailTip");
if(reg.test(email)){
//成功
emailTip.innerHTML = "邮箱正确".fontcolor("green");
return true;
}else{
//失败
emailTip.innerHTML = "邮箱格式有误".fontcolor("red");
return false;
}
}
//校验全部表单选项
function checkAll(){
if( checkName() && checkPwd() && checkRePwd() && checkEmail() ){
//全部校验都通过了
return true;
}else{
//只要有一个校验失败了
return false;
}
}
</script>
</head>
<body>
<!-- form表单的onsubmit事件: 返回true，则提交这个表单。false：不提交这个表单-->
<form action="后台页面.html" method="post" οnsubmit="return checkAll()">
用户名:<input type="text" οnblur="checkName()" id="userName"/><span id="nameTip"></span><br/>
密码：<input type="password" οnblur="checkPwd()" id="userPwd"/><span id="pwdTip"></span><br/>
确认密码： <input type="password" οnblur="checkRePwd()" id="repwd"/><span id="repwdTip"></span><br/>
邮箱：<input type="text" οnblur="checkEmail()" id="email"/><span id="emailTip"></span>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
3 简单验证码（一个极其简单的验证码，其实是一个随机函数）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证码</title>
</head>
<body>
<span id="code"></span>
</body>
<script type="text/javascript">
<!-- 生成随机4位数-->
var str = "";
for(var i=1;i<=4;i++){
var num = Math.floor((Math.random()*10));
str += num;
}
var code = document.getElementById("code");
code.innerHTML = str;
//控制span的style属性
code.style.backgroundColor="gray";
code.style.color="red";
code.style.fontStyle="italic";
</script>
</html>
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
