本書的第4章使用第3章學到的操作DOM的方法和屬性寫了一個展示圖片的網頁，併在第5，6章對代碼進行了優化。 第一版，搭建網頁的靜態結構，包括一級標題<h1>，無序列表清單<ul>，每個列表<li>中又包括了鏈接<a>，當點擊列表文字時會顯示鏈接所指向的圖片，這屬於瀏覽器的預設行為。代碼如下： 問題： ...
本書的第4章使用第3章學到的操作DOM的方法和屬性寫了一個展示圖片的網頁，併在第5，6章對代碼進行了優化。
第一版，搭建網頁的靜態結構，包括一級標題<h1>，無序列表清單<ul>，每個列表<li>中又包括了鏈接<a>，當點擊列表文字時會顯示鏈接所指向的圖片，這屬於瀏覽器的預設行為。代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charest="utf-8"/> <title>照片庫</title> </head> <body> <h1>My Photoes Gallery</h1> <ul> <li><a href="pictures/ASH1.png" title="空氣彈簧">ASH</a></li> <li><a href="pictures/LS1.png" title="片彈簧">LS</a></li> <li><a href="pictures/MN1.png" title="磁負剛度">MN</a></li> <li><a href="pictures/PAN.png" title="倒立擺">PAN</a></li> </ul> </body> </html>
問題：顯示圖片後只能通過後退回到列表清單界面，希望實現圖片與列表在同一界面，點擊列表文字後直接將圖片及說明顯示在下方。
第二版，點擊鏈接時直接將圖片及說明顯示在下方
操作步驟分為3步：
1，結構上添加圖片占位符和文本占位符
2，js中寫一個函數，用鏈接中的href屬性替換圖片占位符中的src屬性，用鏈接中的title屬性替換文本占位符的值
3，在html中相應節點上添加事件處理函數，應用js中所寫的函數，註意需要阻止點擊的預設行為
html代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charest="utf-8"/> <title>照片庫</title> </head> <body> <h1>My Photoes Gallery</h1> <ul> <li><a href="pictures/ASH1.png" title="空氣彈簧"
onclick="showPics(this);return false;">ASH</a></li> <li><a href="pictures/LS1.png" title="片彈簧"
onclick="showPics(this);return false;">LS</a></li> <li><a href="pictures/MN1.png" title="磁負剛度"
onclick="showPics(this);return false;">MN</a></li> <li><a href="pictures/PAN.png" title="倒立擺"
onclick="showPics(this);return false;">PAN</a></li> </ul> <img id="placeholder" src="" alt="該圖片已損壞或無法顯示"/> <p id="description">description of picture</p> <script src="ShowPics.js"></script> </body> </html>
js代碼如下：
function showPics(whichPic){ //獲取鏈接節點，獲取圖片節點，將鏈接節點中的href屬性賦給圖片節點中的src屬性 var source=whichPic.getAttribute("href"); var myimage=document.getElementById("placeholder"); myimage.setAttribute("src",source); //用鏈接節點中的title屬性替換文本節點的值 var mytext=document.getElementById("description"); var context=whichPic.getAttribute("title"); mytext.firstChild.nodeValue=context; }
註意：
1，在onclick事件中添加 return false;表示預設行為沒有被觸發即阻止了預設行為。
2，給圖片占位符賦值時除了用setAttribute還可以用一種非DOM的方法，直接給元素的屬性賦值 myimage.src=source，但這種方法並不適用於所有的屬性，一般還是使用setAttribute，適用於所有屬性。
3，給文本節點賦值時，需要註意修改的是p節點的第一個子節點，這個節點才是顯示在界面上的文字。
4，src和href的區別
src（source）用引入的內容替換當前元素，常用於script，img，frame，
瀏覽器解析到該元素時會停止渲染知道文件載入完畢，所以將js文件放在body的最後；
href是一種引用，在當前文檔與引用資源之間建立起一種聯繫，常用於a，link，
瀏覽器解析不會停止，所以用href引用css文件。
問題：
為提高代碼的相容性、可訪問性，需要檢查js功能被禁用時是否支持平穩退化；js與html是否完全分離；對DOM方法或使用到的元素是否存在進行檢測
1，js代碼沒有與html完全分開，事件處理函數仍在html中
2，缺少必要的測試環節，如html中某些元素不存在
第三版：將事件處理函數從html中獨立出來，該函數需要實現的功能：當點擊某一鏈接時，將該鏈接傳遞給showPic（）函數，去掉點擊的預設行為
html代碼只需要將onload函數去掉，在ul標簽上加id屬性
js代碼如下：
function showPics(whichPic){ //增加測試 if(!document.getElementById("placeholder"))return false; //獲取鏈接節點，獲取圖片節點，將鏈接節點中的href屬性賦給圖片節點中的src屬性 var source=whichPic.getAttribute("href"); var myimage=document.getElementById("placeholder"); myimage.setAttribute("src",source); //用鏈接節點中的title屬性替換文本節點的值，能否用nodeValue?可以，但是是p節點的第一個子節點的屬性值 if(!document.getElementById("description"))return false; var mytext=document.getElementById("description"); var context=whichPic.getAttribute("title"); mytext.firstChild.nodeValue=context; } function seperateclick(){ //1,測試當前瀏覽器是否理解DOM方法 if(!document.getElementById)return false; if(!document.getElementsByTagName)return false; var gallery=document.getElementById("picturegallery"); if(!gallery)return false;//疑問？能否先賦值再測試 //2,遍歷列表中的所有鏈接，當某一鏈接被點擊時，把這一鏈接傳遞給showPics函數，取消預設行為 //先將所有的鏈接存放在一個數組中 var links=gallery.getElementsByTagName("a"); //迴圈遍歷 for(var i=0;i<links.length;i++){ links[i].onclick=function() { showPics(this); return false; } } } window.onload=seperateclick;
