JavaScript的DOM操作
JavaScript的DOM操作
（一）DOM是文档对象模型，这种模型为树模型；文档是指标签文档;对象是指文档中每个元素；模型是指抽象化的东西。
（二）Windows对象操作
1.属性和方法
属性（值或者子对象）：
子对象：history，location，document，status，menubar，toolbar等。
方法（函数）
opener：打开当前窗口的源窗口，如果当前窗口是首次启动浏览器打开的，则opener是null。
dialogArgument：对话框返回值。
事件（事先设置好的程序，被触发）。
2.Window.open(“第一部分”“第二部分”“第三部分”“第四部分”)
Window.open的特征参数：
第一部分：写页面地址；
第二部分：_blank打开的方式，在新窗口还是自身的窗口；
第三部分：控制打开的窗口格式，可以写多个，用空格隔开如下：
toolbar=no新打开的窗口无工具条;
menubar=no无菜单栏 status=no无状态栏；
width=100 height=100 宽度高度；
left=100打开的窗口距离左边多少距离；
resizable=no窗口大小不可调；
scrollbars=yes出现滚动条；
location=yes 有地址栏；
Window.open也有返回值，它的返回值是：新打开的窗口对象。
例如：最简单的打开窗口：window.open(“Untitled-1.html”);
打开一个窗口并保存在变量中：var w=window.open();
可以将打开的多个窗口保存在数组w里：
function openW()
{
w[i++]=window.open();
}
3.window.close()；关闭当前窗口；
w.close();关闭保存在变量w中的那个窗口;
关闭多个子窗口：先将打开的窗口存入数组内，利用循环将其挨个关闭；
关闭打开当前窗口的源窗口：window.opener.close();
4.间隔与延迟
间隔执行一段代码（函数）：window.setInterval(“要执行的代码”,间隔的毫秒数);
清除间隔执行：window.clearInterval(间隔的id)；循环一次之后用来清除间隔执行的代码
延迟一段时间执行某一段代码（函数）：window.setTimeout(“要执行的代码”，延迟的毫秒数);
清除延迟：window.clearTimeout(延迟的id);清除setTimeout
5.调整页面
window.resizeTo(宽，高);调整页面的宽度和高度;
window.scrollTo(x,y);滚动页面至哪里，y代表纵向滚动。
window.navigate(“url”)跳转至目标页面，在谷歌浏览器下有bug；
window.moveTo(x,y);移动页面至某一位置，位置由x和y决定;
6.模态对话框和非模态对话框
模态对话框(Modal Dialogue Box),是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭，它和非模态对话框都是永远置顶的，它们的区别在于当对话框打开时，是否允许用户进行其他对象的操作。
打开模态对话框：window.showModalDialog(“url”,”向模态对话框传的值”，“窗口特征参数”);
特征参数：用分号隔开，像素大小用px。dialogHeight，dialogWidth，center等
打开非模态对话框：window.showModalessDialog(“url”,”向模态对话框传的值”，“窗口特征参数”)
var a=window.dialogArgument;可以用一个参数来获取模态或非模态对话框传递的值。
传递的也可以是一个对象。
例题：
/*主网页*/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
<script language="javascript">
var obj = new Object();
obj.name="51js";
window.showModalDialog("a.html",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
/*模态对话框*/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
<script language="javascript">
var obj = window.dialogArguments
alert("您传递的参数为：" + obj.name)
</script>
运行结果：
点击确定后
关闭模态窗口后才能对主窗口操作。
（三）Window.history对象
window.history.back();页面进行后退；
window.history.forward();页面前进；
window.history.go(n);n如果是正数则代表前进n个页面，n如果是负数则代表后退n个页面，一般常用这一种。
（四）window.location对象
location地址栏
var s=window.location.href;获取当前页面的地址
window.location.href=”http:www.baidu.com”修改页面地址，会跳转页面
window.location.hostname:主机名，域名，网站名，可用变量接收
window.location.pathname:路径名，可用变量接收
（五）window.status对象
status状态栏，可以给状态栏添加要显示的文字
window.status=”要在状态栏显示的内容”；设置状态栏文字
（六）window.document对象
1.找到元素：
（1）document.getElementByID(“id”);根据id找，最多找一个；
var a=document.getElementByID(“id”);将找到的元素放在变量中；
document.getElementsByName(“name”)；根据name找，找出来的是数组；（用于表单元素）
document.getElementsByClassName(“name”)；根据classname找，找出来的是数组；
document.getElementsByTagName(“name”)；根据标签名找，找出来的是数组；
2.操作内容：
（1）给表单元素：
①获取内容：
alert(a.innerHTML);标签里的html代码和文字都获取了
alert(a.innerText);只取里面的文字
alert(a.outHTML);包括标签本身的内容（简单了解）
(注意：innerHTML等只能用于双标签，button等单表签不能使用)
例题：
②设置内容：
a.innerHTML=”<font color=red>hello world</font>”;引号里的格式设置有效，原先内容会被替换
a.innerText=””；引号内的内容当作字符串处理，原样呈现。
清空内容：赋值个空字符串。
⑵表单元素：
①获取内容，有三种获取方式：
用id获取
用Name
var t=document.fl.tl; id为fl的form表单id为tl的元素
alert(t.value);
alert(t.innerHTML);获取<textarea>这里的值</textarea>
(innerHTML只能用于双标签)
②设置内容：t.value=”内容改变”;
一个小知识点：
<a herf=”www.baidu.com”onclick=”return false”>转向百度</a>;加了return false则不会跳转，默认是return true会跳转。按钮也一样，如果按钮中设置return false则不会进行提交，利用这个可以对提交跳转进行控制。
3.操作属性
首先利用元素的id找到该元素，存于一个变量中：
var a=document.getElementById(“id”);
然后可以对该元素的属性进行操作：
a.setAttribute(“属性名”，“属性值”);设置一个属性，添加或更改都可以，可以联想一下C#中设置类的属性；
a.getAttribute(“属性名”);获取属性的值；
a.removeAttribute(“属性名”);移除一个属性。
例题：做一个问题，如果输入的答案正确则弹出正确，错误弹出错误；
这里给text里面设置了一个daan属性，里面存了答案，点击检查答案的时候check输入的内容和答案是否一样。
<body>
<form>
中华民国成立于那一年？
<input type="text" daan="1912年" value="" id="t1" name="t1"/>
<input type="button" onclick="check()" id="t2" value="检查答案"/>
</form>
</body>
</html>
<script language="javascript">
function check()
{
//注意，如果将下面前两行代码写在函数外面，则c的值会一直为空，在调用函数时（填写文本框后），c才能取到文本框内输入的值，
var a=document.getElementById("t1");
c=a.value;d=a.daan;
if (c==d)
{
alert("正确");}
else
{
alert("错误");}
}
</script>
4.操作样式
样式为CSS中的样式，所有的样式都可以用代码进行操作。
首先利用元素的id找到该元素，存于一个变量中：
var a=document.get#lementById(“id”);
然后可以对该元素的属性进行操作：
a.style.样式=“”；操作此id元素样式的属性。
document.body.style.backgroundColor="颜色";整个窗口的颜色。
例题：展示图片的自动和手动切换
<style type="text/css">
.show{
width:201px;
height:178px;
background-color:#0F3;
background-image:url(img/1.png);
}
.page{
width:40px;
height:30px;
background-color:#FC0;
}
.page1{
float:left;
position:relative;
top:70px;}
.page2{
float:right;
position:relative;
top:70px;}
</style>
</head>
<body>
<div class="show" id="show">
<div class="page page1" onclick="diyUp()">上页</div>
<div class="page page2" onclick="diyDown()">下页</div>
</div>
</body>
</html>
<script language="javascript">
var pic=new Array();
pic[0]="url(img/1.png)";
pic[1]="url(img/2.png)";
pic[2]="url(img/3.png)";
//用id获取普通标签
var show=document.getElementById("show");
n=0;m=0;
//自动换图
function autoChange()
{
if (m==0)
{
n++;
if(n<=2)
{
show.style.backgroundImage=pic[n];}
else
{
n=0;
show.style.backgroundImage=pic[n];
}
window.setTimeout("autoChange()",3000);
}
}
window.setTimeout("autoChange()",3000);
//手动换图 换上一张
function diyUp()
{
m=1;
n--;
if(n>=0)
{
show.style.backgroundImage=pic[n];
}
else
{
n=2;
show.style.backgroundImage=pic[n];
}
}
//换下一张
function diyDown()
{
m=1;
n++;
if(n<=2)
{
show.style.backgroundImage=pic[n];
}
else
{
n=0;
show.style.backgroundImage=pic[n];
}
}
</script>
5.相关元素操作
var a=document.getElementById(“id”);找到a
var b=a.nextSibling; 找a的下一个同辈元素，注意包含空格；
var b=a.previousSibling,找a的上一个同辈元素，注意包含空格；
var b=a.parentNode,找a的上一个父级元素；
var b=a.childNodes; 找出来的是数组，找a的下一级子元素；
var b=a.firstChild; 第一个子元素，lastChild最后一个，childNodes[n]找第几个
alert（nodes[i] instanceof Text);判断是不是文本，是则返回true，不是返回false，用if判断它的值是不是false，可以去除空格。
6.元素的创建、添加、删除：
var a=document.getElementById(“id”);找到a；
创建：var obj=document.createElement(“标签名“）；创建一个元素
obj.innerHTML=”hello world”;添加的时候首先需要创建出一个元素。
添加：a.appendChild(obj);向a中添加一个子元素。
a.removeChild(obj);删除一个子元素。
列表中a.selectIndex:选中的是第几个；a.options[a.selectIndex]按下标取出第几个option对象
7.字符串的操作
var s=new String();或var s=”aaaa”;
var s=”hello world”;
alert(s.toLowerCase());转小写 toUpperCase()转大写
alert(s.substring(3,8));从第三个位置截取到第八个位置
alert(s.substr(3,8));从第三个位置开始截取，截取八个字符长度，不写后面的数字是截到最后。
s.split(‘’);将字符串按照指定的字符拆开
s.length是属性
s.indexOf(“wordl”);world在字符串中第一次出现的位置，没有返回-1
s.lastIndexOf(“o”);o在字符串最后一次出现的位置
8.日期时间的操作
var d=new Date();当前时间
var d=new Date(1999,3,2);定义一个时间，1999年4月2日，3要加1
d.getFullYear:取年份；d.getMonth():取月份，取出来的少1；d.getDate():取天；d.getDay();取星期几
d.getHours():取小时；d.getMinutes();取分钟；d.getSecond();取秒；d.setFullYear():设置年份，设置月份的时候注意加1。
9.数学函数的操作
Math.ceil();大于当前小数的最小整数
Math.floor();小于当前小数的最大整数
Math.sqrt();开平方
Math.round();四舍五入
Math.random();随机数，0-1之间
小知识点：外面双引号，里面的双引号改为单引号;
在div里面行高设置和整个外面高度一样，才能用数值居中，居中是行居中。
文本框取出来的值是字符串，需要用parseint()转化为数字
s.match(reg);s代表一个字符串，reg代表一个字符串，两者进行匹配，如果两个字符串不匹配，返回一个null。
四、表单验证和事件
㈠表单验证
1.非空验证（去空格）
2.对比验证（跟一个值对比）
3.范围验证（根据一个范围进行判断）
4.固定格式验证：电话号码，身份证号，邮箱，信用卡号等的验证；需要用到正则表达式来进行验证。
5.其它验证
㈡正则表达式
用符号来描述书写规则：/中间写正则表达式/
^:匹配开头，$:匹配结尾；/^e/以ve开头的/ve$/以ve结尾
\d:一个任意的数字
\w:一个任意的数字或字母
\s:任意字符串
{n}：把左边的表达式重复n遍
{m,n}:把左边的表达式重复至少m遍，至多n遍
{m,}把左边的表达式重复至少m遍，至多不限
+:左边的表达式，至少出现一次，至多不限，相当于{1,}
*:左边的表达式，至少出现0次，至多不限，相当于{0,}
?:左边的表达式，至少出现0次，至多出现1次，相当于{0,1}
[a,b,c]:只能取方括号中内容之一
[a-z]或[1-9]:在范围中取其一 [a-z,A-Z]
|：代表或者；():优先级\:转义—“\(\)”这个才是要出现的小括号，需要转义
㈢事件
事件有三要素：事件源、事件数据、事件处理程序
事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发可以加return false：是阻止默认操作
onclick：鼠标单击触发
ondbclick：双击触发
onmouseover：鼠标移动上面触发
onmouseout：鼠标离开时触发
onmousemove：鼠标在上面移动时触发
onchange：只要内容改变触发
onblur：失去焦点时触发
onfocus：获得焦点时触发
onkeydown：按键按下的时候触发
onkeyup：按键抬起来的时候触发
onkeypress：事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。
例子：根据正则表达式验证邮箱
function checkmail()
{
var v4=trim(u4.value);
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(v4.match(reg)!=null)
{
imgs4.setAttribute(“src”,”imges/1.png”);
return true;
}
else
{
imgs4.setAttrinbute(“src”,”imges/2.png”);
return false;
}
常用正则表达式
正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行
匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^\s*|\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字
匹配身份证：\d{15}|\d{18}
评注：中国的身份证为15位或18位
匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]\d*$ //匹配正整数
^-[1-9]\d*$ //匹配负整数
^-?[1-9]\d*$ //匹配整数
^[1-9]\d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
评注：最基本也是最常用的一些表达式
}
