事件處理函數:事件處理函數的作用是,在特定事件發生時調用特定的JavaScript代碼。本例中想要在用戶點擊某個鏈接的時候觸發一個動作,所以需要使用onclick事件處理函數。
添加事件處理函數的語法:
event="JavaScript statement(s)"
js代碼包含在一對引號之間,可以把任意數量的js語句放在這對引號之間,只要把各條語句用分號隔開就可以。
οnclick="showPic(this);"//this表示這個對象,本例中即這個<a>元素標簽
事件處理函數的工作機制:在給某個元素添加了世間處理函數后,一旦事件發生,相應的js代碼就會執行。被調動的js會返回一個值,這個值將會被傳遞給那個時間處理函數。本例中當鏈接被點擊時,如果執行的js代碼返回true,事件處理函數就認為這個鏈接被點擊了,反之如果返回的值是false,onclick事件處理函數就認為這個鏈接沒有被點擊。return false;就會將false返回給事件處理函數,所以這個鏈接的默認行為沒有被觸發(打開圖片查看器。)
?
<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="utf-8">
?? ?<title>Images</title>
</head>
<body>
<h1>圖片庫</h1>
<ul>
?? ?<li><a href="images/door.jpg" οnclick="showPic(this);return false;" title="red door">Door</a></li>//return false;事件處理函數工作機制
?? ?<li><a href="images/heart.jpg" οnclick="showPic(this);return false;" title="red heart">Heart</a></li>
?? ?<li><a href="images/lake.jpg" οnclick="showPic(this);return false;" title="Xuanwu Lake">Lake</a></li>
?? ?<li><a href="images/light.jpg" οnclick="showPic(this);return false;" title="lights">Light</a></li>
?? ?<li><a href="images/river.jpg" οnclick="showPic(this);return false;" title="Qinhuai River">River</a></li>
</ul>
<img id="placeholder" src="images/1.jpg" alt="my image gallery">//選用一個無用圖片做占位符圖片
<script type="text/javascript" >
?? ?function showPic(whichpic){
?? ??? ?var source = whichpic.getAttribute("href");
?? ??? ?var placeholder=document.getElementById("placeholder");
?? ??? ?placeholder.setAttribute("src",source);
?? ?}
</script>
</body>
</html>
?
?
childNodes屬性
在一顆節點樹上,childNodes屬性可以用來獲取任何一個元素的所有子元素,它是一個包含這個元素全部子元素的數組:element.childNodes
childNodes返回的數組包含所有類型的節點,不僅僅是元素節點。
?
每個節點都有nodeType屬性,這個屬性讓我們知道正在與哪一種節點打交道。
語法:node.nodeType
nodeType的值是一個數字。
alert(body_element.nodeType)
nodeType屬性總共有12中可取值,但是其中僅有3種具有實用價值。
元素節點的nodeType屬性值是1;
屬性節點的nodeType屬性值是2;
文本節點的nodeType屬性值是3;
?
nodeValue屬性
如果想要改變一個文本節點的值,那就使用DOM提供的nodeValue屬性,它用來得到(和設置)一個節點的值:node.nodeValue;
不僅可以用來檢索節點的值,還可以用來設置節點的值。
?
firstChild和lastChild屬性
只要需要訪問childNodes數組中的第一個元素,都可以寫成firstChild?? node.firstChild ? ←==→ ? node.childNodes[0]
node.lastChild ? ←==→ ? node.childNodes[node.childNodes.length-1]