DOM编程
1、为什么要学习DOM
(1) 通过dom编程，我们可以写出各种网页游戏
（2）dom编程也是ajax的重要基础
2、DOM编程介绍
DOM = Document Object Model(文档对象模型)
DOM是HTML与XML的应用编程接口(API)
BOM和DOM相辅相成的关系
BOM为纲，DOM为目，DOM是BOM的具体体现
3、DOM对象
3.1 Windows对象
3.1.1 confirm
function test(){
var res= window.confirm("你要删除");
if(res){
window.alert("删除");
}else{
window.alert("放弃删除");
}
}
<input type="button" value="删除" onclick="test()"/>
3.1.2 setInterval();
该函数可以根据指定的时间，循环的执行某个函数，或者表达式需求，请 每隔1s弹出
hello world
function sayHello(){
window.alert("hello");
}
function showTime(){
//在元素间的文本就是通过对象.innerText
document.getElementById("mytime").innerText = new Date().toLocaleString
();
}
setInterval("showTime()",1000);
<span id="mytime"></span>
//需求 小人动态
var n=1;
//让静态图片动起来
function runChild(){
//得到myimg对象
var myimg = document.getElementById("myimg");
myimg.src = ((n++%8)+1)+".png";
}
setInterval("runChild",1000);
<img src="1.png" id="myimg"/>
//扩展要求：小人走10步就停止。
3.1.3 clearInterval()
var n=1;
var count=0;
//让静态图片动起来
function runChild(){
count++;
if(count==11){
clearInterval(myTimer);
}
//得到myimg对象
var myimg = document.getElementById("myimg");
myimg.src = ((n++%8)+1)+".png";
}
var myTimer=setInterval("runChild",1000);
<img src="1.png" id="myimg"/>
3.1.4 setTimeout();
在指定的毫秒数后调用函数后表达式（但是只调用一次）
需求 再打开页面后，5秒后弹出 hello
setTimeout("sayHello()",5000);
var n=1;
var count=0;
//让静态图片动起来
function runChild(){
count++;
//小人走10步，停5秒
if(count==11){
clearInterval(myTimer);
setTimeout("reRun()",5000); //只调用一次小人走路的方法
count=0;
}
//得到myimg对象
var myimg = document.getElementById("myimg");
myimg.src = ((n++%8)+1)+".png";
}
var myTimer=setInterval("runChild()",1000);
function reRun(){
//重新设置调用小人走路的方法，1秒调用一次，同时count在计小人的走几步，走到第11步，就清除myTimer的对象。
myTimer=setInterval("runChild()",1000);
}
<img src="1.png" id="myimg"/>
3.1.5 clearTimeout()
function test(){
window.alert("abc");
}
var mytimer=setTimerout("test()",3000);
//取消timeout
clearTimerout(mytimer);
3.1.6 moveTo() moveBy()
案例：
window.moveTo(100,100); //相对屏幕的左上角移动
window.moveBy(50,50); //相对当前窗口的左上角移动
function test2(){
window.moveTo(100,100);
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="移动"/>
</body>
3.1.7 resizeTo()resizeBy()
window.resizeTo(100,100); //把窗口调整到100,100
window.resizeBy(100,100); //把窗口再增加 100,100
function test2(){
window.moveTo(200,200); //调整窗口大小
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="改变大小"/>
</body>
3.1.8 开一个新窗口
function test2(){
//window.open("newWindow.html","_self");//还在原来页面开一个新窗口，替换原页面窗口
//window.open("newWindow.html","_blank"); //重新打开一个新窗口
window.open("newWindow.html","_blank","channelmode=yes,resizable=no,titlebar=no,location=no");
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="打开新窗口"/>
</body>
3.1.9 opener
父窗口和子窗口通信
//演示子窗口发消息给父窗口
<script language="javascript" type="text/javascript">
var newWindow;
function test2(){
newWindow = window.open("newWindow.html","_blank");
//newWindow.document.info2.value ="哈哈";
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
我是一个窗口
<input type="button" value="打开新窗口" onclick="test2();" />
<span id="myspan">消息</span>
</body>
//newWindow.html
<script language="javascript" type="text/javascript">
function notify(){
var val = document.getElementById("info").value;
opener.document.getElementById("myspan").innerText =val;
}
</script>
</head>
<body>
我是子窗口
<input type="text" id="info"/><input type="button" value="通知给父窗口"
onclick="notify();"/>
</body>
//父窗口与子窗口相互通信
var newWindow;
function test2(){
//newWindow其实就是指向新窗口的引用
newWindow = window.open("newWindow.html","_blank");
//newWindow.document.info.value ="哈哈";
}
function test3(){
newWindow.document.getElementById("info").value = $("info2").value;
}
function $(id){
return document.getElementById(id);
}
<body>
我是一个窗口
<input type="button" onclick="test2()" value="打开新窗口"/>
<span id="myspan">消息</span>
<input type="text" id="info2"><input type="button" value="通知给子窗口" onclick="test3();"/>
</body>
//newWindow.html
<script language="javascript">
function notify(){
var val=document.getElementById("info").value;
opener.document.getElementById("myspan").innerText=val;
}
</script>
我是新窗口
<input type="text" id="info"/> <input type="button" value="通知给父窗口" onclick="nofity();"/>
3.1.10登陆页面，登陆成功后，5秒钟跳转到另一个页面
//login.html
<script language="javascript">
function checkuser(){
if($('uname').value=="shunping"&&$("pwd").value=="123"){
return true;
}else{
$('uname').value ="";
$("pwd").value="";
return false;
}
}
function $(id){
return document.getElementById(id);
}
</script>
<form action = "ok.html">
u:<input type="text" id="uname"/><br/>
p:<input type="password" id="pwd"/><br/>
<input type="submit" value="登陆" onclick="return checkuser();"/>
//ok.html
<script language="javascript">
//setTimeout("javascript:window.open('manage.html')",5000);
function tiao(){
clearInterval(mytime);
window.open('manage.html',"_self");
}
setTimeout("tiao()",5000);
function changeSec(){
//得到myspan的值
$("myspan").innerText =parseInt($("myspan").innerText)-1;
}
var mytime=setInterval("changeSec()",1000);
function $(id){
return document.getElementById(id);
}
</script>
登陆成功<span id="myspan">5</span>秒后自动跳转到管理页面
//manage.html
管理页面
3.1.11在浏览器状态栏显示可以移动的文字
var space_num = 0;
var dir =1;
function myScroll(){
var space_my="";
space_num = space_num + 1 * dir;
if(space_num > 50 || space_num <0){
dir = dir * -1;
}
for(var i=0;i<space_num;i++){
space_my = space_my + " ";
}
window.status =space_my + "世界你好！";
}
function startIt(){
setInterval("myScroll()",100);
}
<body onload="startIt()">
3.2 histroy对象
作用： 该对象包含客户端访问过的URL信息
//histstroy.back() = histroy.go(-1);
代码：
a.html
<a href="b.html">goto b</a>
b.html
<script language="javascript">
function back(){
window.alert(history.length);//每次点击一次“返回上级页面”，
history.length 就会累加数字 1，除非关闭页面。
history.back();
history.go(-1); //等价于histroy.go(-1);
}
</script>
<a href="#" onclick="back();">返回上级页面</a>
3.3 location对象
<script language="javascript">
function test(){
location.reload();
window.alert(locaiton.href+""+location.hostname+""+location.port);
document.write(location.hostname); //获取网页地址中的主机名
}
</script>
<body>
<input type="button" value="刷新页面" onclick="test()"/>aaaabbs
</body>
3.4 navigator对象 该对象包含当前浏览器的各信息
<script language="javascript">
function test(){
document.write("<p>Name:"); document.write(navigator.appName + "</p>" +navigator.platform+"</p>"+navigator.systemLanguage);//navigator.systemLanguage 只有IE是可使用
}
</script> <body> <input type="button" value="刷新页面" onclick="test()"/>aaaabbs </body>
3.5 screen对象
<script language="javascript">
document.write(screen.height+" "+screen.width);
document.write(screen.availHeight);
</script>
3.6 event对象
3.6.1 直接和某个html控件绑定，比如：
<script language="javascript">
function test(){
//编写代码
}
</script>
<input type="button" value="确定" id="" onclick="test()"/>
3.6.2 通过getElementById() 获取到元素后，再绑定监听，如下：
<script language="javascript">
function test(){
document.write("hello");
}
</script>
<body>
<input type="button" id="but1" value="确定"/>
<script language="javascript">
document.getElementById("but1").onclick=test;
</script>
</body>
3.6.3 如果我们有一个投票系统，但是只能投一次，就不让用了。
<script language="javascript">
function test(){
document.write("你投了一次票");
//解除事件绑定,在IE内核的浏览器中使用
//document.getElementById("but1").detachEvent('onclick',test);
document.getElementById("but1").removeEventListener("click",test,true); //使用在除了IE内核的其他浏览器中
}
</script>
<body>
<input type="button" id="but1" value="投票"/>
<script language="javascript">
//给一个按钮绑定事件
//document.getElementById("but1").attachEvent('onclick',test);
document.getElementById("but1").addEventListener("click",test,true); //使用在除了IE内核的其他浏览器中
</script>
</body>
3.6.4 event.keyCode验证录入的是否为数字，如果不是数字，自动清空，不让录入。
<script language="javascript">
function test(event){
if(event.keyCode<48 || event.keyCode>57){
window.alert("你输入的不是数");
//window.event.returnValue=false;
return false; //清空文本框中的内容
}
}
</script>
<input type="text" onkeypress="return test(event)" id="text1"/>
<input type="button" onclick="test()" value="提交"/>