【幹貨】JavaScript DOM編程藝術學習筆記4-6
四、案例研究：JavaScript圖片庫
js:
function showPic(whichpic){
//取得鏈接
var source=whichpic.getAttribute("href");
//取得占位圖
var placeholder=document.getElementById("placeholder");
//改變占位圖src屬性
placeholer.setAttribute("src",source);
//取得文字描述
var text=whichpic.getAttibute("title");
//取得占位文字
var description=document.getElementById("description");
//改變占位文字值
description.firstChild.nodeValue=text;
}
在html中調用：
<a onclick="showPic(this); return false;"></a>
註：
nodeValue屬性:node.nodeValue節點的值，通常用這個屬性來獲取文本值，但要註意的是在<p id="description">text</p>中，description的值是null，它的第一個子節點firstChild的值才是text
nodeType屬性:節點的nodeType屬性返回的是數字，共有12種值，其中，元素節點是1，屬性節點是2，文本節點是3.
childNodes屬性:返回的是所有類型的節點，不僅是元素節點。
五、最佳實踐
利用元素的class屬性，將事件處理函數從html中分離出來。
window.onload=prepareLinks;
function prepareLinks(){
//獲取所有鏈接
var links=document.getElementsByTagName("a");
//遍歷所有鏈接
for(var i=0; i<links.length; i++){
//找出對應類的鏈接
if(links[i].getAttribute("class")=="popup"){
//為對應類的鏈接執行事件處理函數
links[i].onclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
function popUp(winURL){
//打開一個新窗口顯示winURL,窗口名為popup，寬320，高480
window.open(winURL,"popup","width=320,height=480");
}
註：
平穩退化graceful degradation:讓一些不支持javacript的瀏覽器也能順利完成基本的操作。比如就算有事件處理函數，在鏈接中將a href設置成真實的URL。比如搜索機器人searchbot基本都不能理解javascript代碼，如果不能平穩退化，搜索排名就會受損。
漸進增強：用一些額外的信息去包裹原始數據，按照漸進增強原則創建的網頁幾乎都能平穩退化。css代碼負責關於表示的信息，javascript代碼負責行為的信息，他們都應該表現為額外的指令層。
為什麽用window.onload來執行函數，而不是直接執行：不管js代碼放在頭部還是尾部，都有可能在腳本加載時文檔還不完整，有些方法就不能正常工作。而document對象是window對象的一個屬性，當window對象觸發onload事件時，document對象已經存在。
向後兼容：對象檢測object detection如果你不理解這個方法，請離開。if(!document.getElementById) return false;
性能考慮：盡量少訪問DOM和盡量減少標記數量；合並和放置腳本，將代碼合並到一個js文件中，可以減少加載頁面時發送的請求數量。另外，文件如果放在head裏會導致瀏覽器無法並行加載其他文件，一般放在文檔末尾body之前可以讓頁面變得更快；壓縮腳本，有很多壓縮工具，引用壓縮版本，另一個在即添加註釋作為副本。
六、案例研究：圖片庫改進版
將圖片庫案例的事件處理函數從html中分離出來，並增加了對象檢測來保證平穩退化。
function prepareGallery(){
//對象檢測
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
//取得圖片鏈接大框架
var gallery=document.getElementById("imagegallery");
//取得圖片鏈接
var links=getElementsByTagName("a");
//遍歷鏈接
for(var i=0; i<links.length; i++){
//對每個鏈接執行onclick事件，在占位showPic
links[i].onclick=function(){
//showPic執行成功了返回false，阻止默認行為。失敗的話返回true，繼續執行默認行為，到鏈接地址
return showPic(this)? false: true;
}
}
}
function showPic(whichpic){
//對象檢測
if(!document.getElementById("placeholder")) return false;
//取出鏈接的href
var source=whichpic.getAttribute("href");
//獲得占位圖元素
placeholder=document.getElementById("placeholder");
//檢測占位元素是否是圖片元素
if(placeholder.nodenName!="IMG") return false;
//改變占位圖地址為鏈接圖片
placeholder.setAttribute("src",source);
var description=document.getElementById("description");
//有文字描述元素的話繼續執行
if(description){
//鏈接title屬性不存在的話賦值為空
var text=whichpic.getAttribute("title")? whichpic.getAttribute("title"): "";
//改變文字表述為鏈接的title
description.firstChild.nodeValue=text;
}
//函數執行成功的話，返回true
return true;
}
註：
this ：是執行事件處理函數onclick時關聯的那個元素鏈接
onload事件：如果只有一個函數的話直接window.onload=function1;這種情況下再加一個函數的話window.onload=function2;只有最後的那個才會被實際執行。所以如果多個的話要整合一個addloadEvent，這樣每次要增加函數的話只用增加一條語句：addLoadEvent(func2);即可。
function addLoadEvent(func){
//把現有的處理函數值存入oldonload
var oldonload=window.onload;
//如果還沒有綁定任何函數，則把func添加給它
if(!typeof oldonload!="function"){
window.onload=func;
}
//如果已經綁定了函數，則新函數追加到末尾
else{
window.onload=function(){
oldonload();
func();
}
}
}
DOM Core和HTML-DOM:
getElementById getElementsByTagName getAttribute setAttribute都是DOM Core，他們並不專屬於javascript ，任何支持DOM的語言都可以使用；另外它們的用途也不僅限於處理網頁，可以處理任何一種標記語言編寫的文檔。
HTML-DOM通常更短，用一個點比如用document.forms來代替document.getElementsByTagName("a")，用placeholder.src=sourc來代替placeholder.setAttribute("src",source)
【幹貨】JavaScript DOM編程藝術學習筆記4-6