一、简介
DOM（Document Object Model，文档对象模型）就是把Html页面模拟成一个对象，就像XDocument一样，把Xml模拟成了一个对象。
JavaScript和Dom的关系就像C#和ADO.Net的关系。
Dom也像WinForm一样，通过事件、属性、方法进行编程。
CSS+JavaScript+DOM=DHTML
node 节点
element 元素
二、事件
1、动态给文档注册事件
<!-- 只能给事件注册一个方法，这里f1是事件响应函数 -->
<!--点击按钮，动态给文档注册单击事件-->
<head>
<title></title>
<script type="text/javascript">
function f1() {
alert("别点我！");
}
</script>
</head>
<body>
sdklafjklajsfkjklsjafkjlas
<input type="button"value="click" οnclick="document.οnclick=f1"/>
</body>
2、动态注册多个事件:
（1）attachEvent只有IE支持
<head>
<title></title>
<script type="text/javascript">
//相当于C#中的btn.Click+=f1
document.attachEvent("onclick", f1);
document.attachEvent("onclick", f2);
//先弹出f2再弹出f1
function f1() {
alert("f1");
}
function f2() {
alert("f2");
}
</script>
</head>
<body>
sdklafjklajsfkjklsjafkjlas
</body>
（2）addEventListener w3c标准（ff chrom等支持）
document.addEventListener("click", f1);
document.addEventListener("click", f2);
//先弹出f1再弹出f2
function f1() {
alert("f1");
}
function f2() {
alert("f2");
}
三、基本对象
（一）window 顶级对象
1、使用window对象的方法可以省略window，比如alert()方法。
2、window对象的方法
（1）confirm
<head>
<title></title>
<script type="text/javascript">
function f1() {
//弹出提示，返回bool类型
if (confirm('是否删除')) {
alert('删除');
}
else {
alert('不删除');
}
}
</script>
</head>
<body>
<input type="button" value="删除" οnclick="f1()"/>
</body>
（2）navigate（只有IE支持）
<input type="button" value="navigate" οnclick="navigate('01.htm');" />
其他浏览器用window.location.href:
<input type="buttom" value="location" οnclick="location.href="01.htm";"/>
(3)setInterval(code,delay) 间隔一段时间执行指定的代码（类似于WinForm中的Timer）
<input type=”buttom” value=”setInterval” οnclick=”setInterval(‘alert(\‘abc\’)’,2000)”/>
function f3(){
if(tmrId){
clearInterval(tmrId);
}
}
跑马灯案例：(在vs中)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我爱北京天安门</title>
<script type="text/javascript">
var flag = "left";
var inter;
function interval(flag) {
if (inter != null) {
clearInterval(inter);
}
//run(flag)要加""
inter = setInterval("run(flag)", 1000);
};
function run(flag) {
var head;
var left;
if (flag == "left") {
head = document.title.substr(0, 1);
left = document.title.substr(1);
}
else if(flag == "right"){
head = document.title.substr(0, document.title.length-1);
left = document.title.substr(document.title.length-1);
}
document.title = left + head;
};
</script>
</head>
<body>
<input type="button"οnclick="interval('left')"value="left"/>
<input type="button"οnclick="interval('right')"value="right"/>
</body>
</html>
（4）setTimeout也是定时执行，但只执行一次。3、window对象的属性
window.location.href、window.location.reload
window.event是IE下非常重要的属性，用来获取发生事件的信息，事件不局限于window对象的事件。
window.event.altKey 判断是否按下Alt键
window.event.clientX和clientY发生事件时鼠标在文档上的位置
window.event.screenX和window.event.screenY屏幕上的位置
window.event.returnValue 取消后续默认行为的执行（火狐不支持）
function btn_click() {
var txt = document.getElementById("txt").value;
if (txt.length == 0) {
alert("请输入用户名");
//取消默认行为的执行submit
window.event.returnValue =false;
}
}
return false; 也能取消后续默认行为（都支持），但不能在动态注册事件中执行。
4、window.event的属性
（1）srcElement:获得事件源对象。
（2）clipboardData对象，对粘贴板的操作。（只支持IE）
（a）setData(“Text”,val),设置粘贴板中的值
<head>
<title></title>
<script type="text/javascript">
function f1() {
var t = document.getElementById("txt").value;
window.clipboardData.setData("text", t);
}
</script>
</head>
<body>
<input type="text"id="txt" value="http://www.qiushibaike.com"/>
<input type="button"value="复制"οnclick="f1()"/>
</body>
（b）禁止复制
<input id=”num1” type=”text” οndrag=”return false;” οncοpy=”alert(‘禁止复制’);”return false;>
（c）复制自动加版权
<head>
<title></title>
<script type="text/javascript">
//复制的时候自动加版权
function ff() {
var t = clipboardData.getData("text");
t = t + "<br/>版权：http://www.itcast.cn";
clipboardData.setData("text", t);
}
</script>
</head>
<bodyοncοpy="setTimeout('ff()',100)"><!--注意加上延时-->
（二）window.document、window.document.body
1、onload方法
//动态注册事件，窗体加载完成后执行
window.onload = function(){
window.txt.value = "admin";
}
2、document的方法
（1）document.write()
document.write(“<input type=’text’/><br/>”);
（2）document.writeln()
//writeln是用”\n”换行
document.writeln(“<pre>123132”);
document.writeln(“acbc</pre>”);
（3）document.getElementById()
window.onload = function () {
//整个html文档根节点<html>
var root = document.documentElement;
var body = document.documentElement.chlidNodes[1];
for (var i = 0; i < body.childNodes.length; i++) {
document.write(body.childNodes[i].nodeName +"<br/>");
}
}
（4）getElementsByName()
<head>
<title></title>
<script type="text/javascript">
function f1() {
//radio的集合
var radios = document.getElementsByName("sex");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
break;
}
}
}
</script>
</head>
<body>
<input type="radio"value="nan" name="sex" />男
<input type="radio"value="nv" name="sex" />女
</body>
（5）getElementsByTagName()