今天學習了DOM，做了以下一些基礎練習……
DOM是Document Object Model文檔對象模型的縮寫；使用JavaScript操作DOM進行DHTML開發。
學習目標：能夠使用JavaScript操作Dom實現常見的DHTML效果。
參考書：張孝祥《JavaScript網頁開發——體驗式學習教程》
一、DOM的入門：
1、DOM就是HTML頁面的模型，將每個標簽都做為一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的文本框、層等元素進行編
程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設置文本框中的值。
2、DOM也像WinForm一樣，通過事件、屬性、方法進行編程。
3、CSS+JavaScript+DOM=DHTML（即動態 HTML，是HTML語言的擴展。它可以增加文檔與對象的演示文稿效果。）
二、事件：
1、事件：<body onmousedown="alert('哈哈')">當點擊鼠標的時候執行onmousedown中的代碼。有時間事件響應的代碼太多，就放到單獨的函
數中：
復制代碼 代碼如下:
<script type="text/javascript">
function bodymousedown()
{
alert("網頁被點壞了，賠吧！");
alert("逗你玩的！");
}
</script>
<body onmousedown="bodymousedown()">
請注意：bodymousedown後的括號不能丟，因為表示調用bodymousedown函數，而不是onmousedown事件的響應函數是bodymousedown。
2、動態設置事件：
可以在代碼中動態設置事件響應函數，就像.Net中"btn.Click+="一樣。
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function bodymousedown() {
alert("網頁被點壞了,賠吧!");
alert("逗你玩的!");
}
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
</head>
<body>
<input type="button" onclick="document.ondblclick=f1" value="關聯事件1" />
<input type="button" onclick="document.ondblclick=f2" value="關聯事件2" />
</body>
</html>
3、window對象代表當前浏覽器窗口，使用window對象的屬性、方法的時候可以省略window，比如window.alert('a')可以省略成alert('a')
1）alert方法，彈出消息對話框
2）confirm方法，顯示“確定”、“取消”對話框，如果按了【確定】按鈕，就返回true，否則就false。
if(confirm("是否繼續？"))
｛
alert("確定");
｝
else
{ alert("取消");}
3）重新導航到指定的地址：navigate("http://www.microsoft.com/");
4) setInterval每隔一段時間執行指定的代碼，第一個參數為代碼的字符串，第二個參數為間隔時間（單位毫秒），返回值為定時器的標識。如：setInterval("alert('hello')",5000);
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>歡迎光臨我的主頁</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstch = title.charAt(0);
var leftstr = title.substring(1, title.length);
document.title = leftstr + firstch;
} //目的是將網頁的標題滾動起來
setInterval("scroll()", 500);
</script>
</head>
<body>
</body>
</html>
5) clearInterval取消setInterval的定時執行，相當於Timer中的Enabled=False。因為setInterval可以設定多個定時，所以clearInterval要指定清除那個定時器的標識，即setInterval的返回值。var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout也是定時執行，但是不像setInterval那樣是定時執行，而是設定時間後只執行一次，clearTimeout也是清除定時。
很好區分：Interval是定時；Timeout是超時之意。如：var timeoutld=setTimeout("alert('hello')",2000);
案例：實現標題欄走馬燈的效果，也就是浏覽器的標題文字每隔500ms向右滾動一下。提示：標題為document.title屬性。
4、1）onload:網頁加載完畢時觸發，浏覽器是一邊下載文檔、一邊解析執行，可能會出現JavaScript執行時需要操作某個元素，這個元素還沒有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之後。元素的onload事件是元素自己加載完畢時觸發，而body 裡的onload才是全部加載完成。
2）onunload：網頁關閉（或者離開）後觸發。在事件中為 "Window.event.returnValue"賦值（要顯示的警告消息），這樣窗口離開（比如前進、後退、關閉）就會彈出確認消息。如：<body onbeforeunload="Window.event.returnValue='真的要放棄發貼退出嗎？'">
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//showModelDialog('HTMLPageWindow.htm');//被攔截
//btn.value = "OK";//報錯，因為btn元素還沒有被構建
</script>
</head>
<body onload="btn.value='OK';" onbeforeunload="window.event.returnValue='真的要放棄發貼退出嗎？文章會被丟失!';">
<input type="button" id="btn" value="模態對話框" onclick="showModelessDialog('HTMLPageWindow.htm')" />
<input type="text" />
<textarea cols="20" rows="20"></textarea>
</body>
</html>
5、其它事件：
除了有特有的屬性之外，當然還有通用的HTML元素的事件：onclick(單擊)、ondblclick(雙擊)、onkeydown(按鍵按下)、onkeyup(按鍵釋放)、onkeypress(點擊按鍵)、onmousedown(鼠標按下)、onmousemove(鼠標移動)、onmouseout(鼠標離開元素范圍)、
onmouseover(鼠標移動到元素范圍)、onmouseup(鼠標按鍵釋放)等。
三、window對象的屬性
1、window.location.href="http://www.sina.com.cn",重新導向新的地址，和navigate方法效果一樣。window.location.reload()刷新頁面。
2、window.event是非常重要的屬性，用來獲得發生事件時的信息，事件不局限於window對象的事件，所有元素的事件都可以通過event屬性取到相關信息。
1) altKey屬性，boot類型，表示發生事件時alt鍵是否被按下，類似的還有ctrlKey、shiftKey屬性，例子<input type="button" value="點擊" onclick="if(event.altKey)
{alert('Alt點擊')}else{alert('普通點擊')}"/>;
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='HTMLPage1.htm'" />
<input type="button" value="點擊" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通點擊')}" />
<a href="http://www.baidu.com" onclick="alert('禁止訪問！');window.event.returnValue=false;">百毒</a>
<form action="jing.aspx">
<input type="submit" value="提交" onclick="alert('數據有問題!');window.event.returnValue=false;" />
</form>
</body>
</html>
2) clientX、clientY 發生事件時鼠標在客戶區的坐標；screenX、screenY發生事件時鼠標在屏幕上的坐標；offsetX、offsetY發生事件時鼠標相對於事件源（比如點擊按鈕時觸發onclick）的坐標。
3）returnValue屬性，如果將returnValue設置為false，就會取消默認事件的處理。
4）srcElement:獲得事件源對象
5）KeyCode：發生時間時的按鍵值
6）button：發生時間時鼠標的按鍵，1為左鍵，2為右鍵，3為左右鍵同時按。<body onmousedown="if(event.button==2){alert('禁止復制')}">