DOM编程(1)

1.为什么要学习dom编程
（1）通过dom编程，我们可以写出各种网页游戏。
（2）dom编程也是ajax的重要基础。
2.dom介绍
DOM=Document Object Model（文档对象模型），根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。

js把浏览器，网页文档和网页文档中的html元素都用相应的内置对象来表示，这些对象与对象间的层次关系称为dom，针对网页（html，jsp，php，aspx.net）的dom就是html dom。
重要概念：
（1）上面说的内置对象就是dom对象，准确的说是html dom对象。
（2）dom编程时，会把html文档看做是一棵dom树。
dom树：

（3）dom编程的核心就是各个dom对象。
3.DOM细节
（1）BOM(The Browser Object Mode)浏览器对象模型
通过使用bom，可移动窗口、更改状态栏文本。bom是w3c组织提出的，它建议所有的浏览器都应当遵循这样的设计规范，可以说bom和dom关系密切，相互影响，bom为纲，dom为目，我们可以简单的理解dom就是bom的具体实现。
（2）常用的dom对象层次一览图

（3）window对象
alert():显示消息和一个确认按钮的警告框
confirm():显示消息以及确认按钮和取消按钮的对话框
案例：

function test(){    var res=window.confirm("你要删除");    if(res){        window.alert("删除");    }else{        window.alert("放弃删除");    }}<input type="button" value="删除记录" onclick="test()"/>

setInterval() :按照指定的周期（毫秒计）来循环调用函数或计算表达式
clearInterval():停止计时器
案例：每隔一秒弹出hello以及简易时钟

    function sayHello(){        window.alert('hello');    }    setInterval("sayHello()",1000); //每隔一秒    function showTime(){        //document.writeln(new Date());        //在元素间的文本就是通过对象.innerText    document.getElementById("mytime").innerText=new Date().toLocaleString();    }    setInterval("showTime()",1000); //每隔一秒

setTimeout():在指定的毫秒数后调用函数或计算表达式（但是只调用一次）
案例：在打开页面后，5秒后弹出hello

    function sayHello(){        window.alert('hello');    }        //5秒后调用sayhello    setTimeout("sayHello()",5000);

clearTimeout():
案例：

    function test(){        window.alert("abc");    }    var mytimer=setTimeout("test()",3000);    //取消mytimer    clearTimeout(mytimer);

moveTo():把窗口的左上角移动到一个指定的坐标
moveBy():可相对窗口的当前坐标把它移动指定的像素
案例：

window.moveTo(100,100);window.moveBy(100,100);

resizeBy():按照指定的像素调整窗口的大小
resizeTo():把窗口的大小调整到指定的宽度和高度
案例：

window.resizeTo(100,100);//把窗口调整到100,100window.resizeBy(100,100);//把窗口再增加100,100

open():打开一个新的浏览器窗口或查找一个已命名的窗口

window.open("newWindow.html","_blank","width=200,height=100,location=no");

close():关闭窗口
closed：返回窗口是否已被关闭
status:设置窗口状态栏的文本
opener:返回对创建此窗口的窗口的引用
案例：父窗口和子窗口通信
父窗口：

    function test2(){        var newWindow=window.open("newWindow.html","_blank");    }       function test3(){        newWindow.document.getElementById("info").value=document.getElementById("info2").value;    }<input type="button" onclick="test2()" value="打开新窗口"/><span id="myspan"></span><input type="text" id="info2"/><input type="button" value="通知给子窗口" onclick="test3()">   

子窗口：

<script language="javascript" type="text/javascript">function notify(){    var x=document.getElementById("info").value;    window.alert(x);    window.opener.document.getElementById("myspan").innerText=x;}</script>    我是新窗口    <input type="text" value="" id="info"/>    <input type="button" value="通知给父窗口" onclick="notify();"/>

onload:页面装载
onunload:关闭页面
案例：登录页面跳转到管理页面
登录页面：

    function checkuser(){        if(get('uname').value=="apple"&&get('pwd').value=="123"){            return true;        }else{            get('uname').value=="";            get('pwd').value=="";            return false;        }    }    function get(id){        return document.getElementById(id);    }<form action="ok1.html">u:<input type="text" id="uname"/><br/>p:<input type="password" id="pwd"/><br/><input type="submit" onclick="return checkuser();" value="登录"/><br/>

跳转页面：

<script language="javascript">function tiao(){    window.open("manage.html","_self");}setTimeout("tiao()",5000);</script>    登陆成功5秒后自动跳转管理页面

（4）history对象
作用：该对象包含客户端访问过的URL信息。
history.back():加载history列表中的前一个URL.
history.go():加载history列表中的某一个具体页面.
history.forward():加载history列表中的下一个URL.
（5）location对象
作用：该对象包含客户端当前的URL信息。
location.reload():重新加载当前文档
location.assign():加载新的文档
lacation.replace():用新的文档替换当前文档
（6）navigator对象
作用：该对象包含有关浏览器的各信息
navigator.appName:返回浏览器名称
navigator.platform:返回运行浏览器的操作系统平台
navigator.systemLanguage：返回 OS 使用的默认语言
（7）screen对象
作用：该对象包含有关客户机显示屏幕的信息
screen.colorDepth:返回目标设备或缓冲器上的调色板的比特深度
screen.width:返回显示屏幕的宽
screen.height:返回显示屏幕的高
screen.availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)
screen.availWidth:返回显示屏幕的宽度 (除 Windows 任务栏之外)
（8）event对象
作用：代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，事件通常与函数结合使用。