一、簡介
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()