js DOM的學習筆記

更新時間：2011年12月22日 20:12:42 作者：

DOM是Document Object Model文檔對象模型的縮寫；使用JavaScript操作DOM進行DHTML開發(fā)

今天學習了DOM，做了以下一些基礎練習……
DOM是Document Object Model文檔對象模型的縮寫；使用JavaScript操作DOM進行DHTML開發(fā)。
學習目標：能夠使用JavaScript操作Dom實現(xiàn)常見的DHTML效果。
參考書：張孝祥《JavaScript網頁開發(fā)——體驗式學習教程》
一、DOM的入門：
1、DOM就是HTML頁面的模型，將每個標簽都做為一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的文本框、層等元素進行編
程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設置文本框中的值。
2、DOM也像WinForm一樣，通過事件、屬性、方法進行編程。
3、CSS+JavaScript+DOM=DHTML（即動態(tài) HTML，是HTML語言的擴展。它可以增加文檔與對象的演示文稿效果。）
二、事件：
1、事件：<body onmousedown="alert('哈哈')">當點擊鼠標的時候執(zhí)行onmousedown中的代碼。有時間事件響應的代碼太多，就放到單獨的函
數(shù)中：

復制代碼代碼如下:

 
<script type="text/javascript"> 
function bodymousedown() 
{ 
alert("網頁被點壞了，賠吧！"); 
alert("逗你玩的！"); 
} 
</script> 
<body onmousedown="bodymousedown()"> 

請注意：bodymousedown后的括號不能丟，因為表示調用bodymousedown函數(shù)，而不是onmousedown事件的響應函數(shù)是bodymousedown。
2、動態(tài)設置事件：
可以在代碼中動態(tài)設置事件響應函數(shù)，就像.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="關聯(lián)事件1" /> 
<input type="button" onclick="document.ondblclick=f2" value="關聯(lián)事件2" /> 
</body> 
</html> 

3、window對象代表當前瀏覽器窗口，使用window對象的屬性、方法的時候可以省略window，比如window.alert('a')可以省略成alert('a')
1）alert方法，彈出消息對話框
2）confirm方法，顯示“確定”、“取消”對話框，如果按了【確定】按鈕，就返回true，否則就false。
if(confirm("是否繼續(xù)？"))
｛
alert("確定");
｝
else
{ alert("取消");}
3）重新導航到指定的地址：navigate("http://www.microsoft.com/");
4) setInterval每隔一段時間執(zhí)行指定的代碼，第一個參數(shù)為代碼的字符串，第二個參數(shù)為間隔時間（單位毫秒），返回值為定時器的標識。如：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的定時執(zhí)行，相當于Timer中的Enabled=False。因為setInterval可以設定多個定時，所以clearInterval要指定清除那個定時器的標識，即setInterval的返回值。var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout也是定時執(zhí)行，但是不像setInterval那樣是定時執(zhí)行，而是設定時間后只執(zhí)行一次，clearTimeout也是清除定時。
很好區(qū)分：Interval是定時；Timeout是超時之意。如：var timeoutld=setTimeout("alert('hello')",2000);
案例：實現(xiàn)標題欄走馬燈的效果，也就是瀏覽器的標題文字每隔500ms向右滾動一下。提示：標題為document.title屬性。
4、1）onload:網頁加載完畢時觸發(fā)，瀏覽器是一邊下載文檔、一邊解析執(zhí)行，可能會出現(xiàn)JavaScript執(zhí)行時需要操作某個元素，這個元素還沒有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加載完畢時觸發(fā)，而body 里的onload才是全部加載完成。
2）onunload：網頁關閉（或者離開）后觸發(fā)。在事件中為 "Window.event.returnValue"賦值（要顯示的警告消息），這樣窗口離開（比如前進、后退、關閉）就會彈出確認消息。如：<body onbeforeunload="Window.event.returnValue='真的要放棄發(fā)貼退出嗎？'">

復制代碼代碼如下:

 
<!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='真的要放棄發(fā)貼退出嗎？文章會被丟失!';"> 
<input type="button" id="btn" value="模態(tài)對話框" 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.,重新導向新的地址，和navigate方法效果一樣。window.location.reload()刷新頁面。
2、window.event是非常重要的屬性，用來獲得發(fā)生事件時的信息，事件不局限于window對象的事件，所有元素的事件都可以通過event屬性取到相關信息。
1) altKey屬性，boot類型，表示發(fā)生事件時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  onclick="alert('禁止訪問！');window.event.returnValue=false;">百毒</a> 
<form action="jing.aspx"> 
<input type="submit" value="提交" onclick="alert('數(shù)據(jù)有問題!');window.event.returnValue=false;" /> 
</form> 
</body> 
</html> 

2) clientX、clientY 發(fā)生事件時鼠標在客戶區(qū)的坐標；screenX、screenY發(fā)生事件時鼠標在屏幕上的坐標；offsetX、offsetY發(fā)生事件時鼠標相對于事件源（比如點擊按鈕時觸發(fā)onclick）的坐標。
3）returnValue屬性，如果將returnValue設置為false，就會取消默認事件的處理。
4）srcElement:獲得事件源對象
5）KeyCode：發(fā)生時間時的按鍵值
6）button：發(fā)生時間時鼠標的按鍵，1為左鍵，2為右鍵，3為左右鍵同時按。<body onmousedown="if(event.button==2){alert('禁止復制')}">

您可能感興趣的文章: