《JavaScript DOM編程藝術》真是入門js的神書，非常推薦想入門的去看這本書。本篇文章主要是記錄自己學習的一些筆記和代碼實例。
一、前五章
前五章主要通過DOM和html以及css創建了個能實現基本功能需求的圖片庫
主要介紹了js的歷史，js的基礎語法和DOM的操作和一個簡單的圖片庫的案例研究
1.HTML
1.1圖片庫案例的第一版html代碼，沒有什么值得注意的地方。很簡單。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content="william"> <meta name="Keywords" content="dom code art"> <meta name="Description" content=""> <link rel="stylesheet" type="text/css" href="css/layout.css"> <script src="js/showPic.js"></script> <title>圖片庫</title> </head> <body> <h1>Photos<h1> <ul> <li><a href="images/1.jpg" title="菊花" onclick="showPic(this);return false;">第一張</a></li> <li><a href="images/2.jpg" title="沙漠" onclick="showPic(this);return false;">第二張</a></li> <li><a href="images/3.jpg" title="八仙花" onclick="showPic(this);return false;">第三張</a></li> <li><a href="images/4.jpg" title="燈塔" onclick="showPic(this);return false;">第四張</a></li> </ul> <img id="zhanweifu" src="images/zhanwei.jpg" alt="占位"/> <p id ="description">選擇一張照片</p> </body> </html>
2.CSS
2.1整篇圖片庫css代碼，這里不對css學習做過多總結，css需要另行總結，只是放出代碼
body{
font-family:"Helvetica","Arial",serif;
color:#333;
background-color:#ccc;
margin: 1em 10%;
}
h1{
color:#333;
background-color:transparent;
}
a:link{color:blue}
a:visited{color:black}
a:hover{color:red}
a:active{color:green}
/*css偽類的運用*/
/*link表示默認，visited表示訪問過后，hover表示經過時，active表示點擊時*/
a{
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both
}
3.JS
3.1showPic函數
1 function showPic(whichPic){ //whichPic是形參，看具體調用的地方 2 //修改占位符圖片 3 var source = whichPic.getAttribute("href"); 4 var place = document.getElementById("zhanweifu"); 5 place.setAttribute("src",source); 6 //修改照片下方描述性文字 7 var text = whichPic.getAttribute("title") 8 var txt = document.getElementById("description"); 9 //alert(txt.firstChild.nodeValue)//firstChild等價於childNodes[0]並且更加直觀 於firstChild對應的還有個lastChild表示childNodes數組的最后一個元素 10 txt.firstChild.nodeValue = text ; 11 }
a.這里接觸到了getAttribute()和setAttribute()；前者獲取元素屬性，后者可以獲取並修改元素屬性值
b.childNodes nodeType和nodeValue三個屬性
childNodes屬性可以獲取任何有一個元素的所有子元素，它是一個包含這個元素所有子元素的數組；如我想獲取body元素的所有子元素
1 var body_element = document.getElementsByTagName("body")[0];//這里[0]是body的第一個元素整篇html也且只有一個用[0]是獲取body元素，不用的話只是獲取一個空的數組
2 body_element.childNodes
nodeType 獲取元素節點語法結構：node.nodeTye如alert(body_element.nodeType )會顯示1；
一般js中只有3種具有實用價值的nodeType屬性：元素節點的屬性值是1；屬性節點的屬性值是2；文本節點的屬性值是3。
nodeValue 用來改變文本節點的值，它用來得到（或設置）一個節點的值，語法結構：node.nodeValue如p[0].nodeValue這里p是元素但是想要獲取文本，那么包含在p元素里面的文本節點是另一種節點，如果想要得到內容那么肯定要求p的第一個子節點的nodeValue，★當然第一個也可以用firstChild也表示 p[0]和p.firstChild是等價的
那么以上這些可以實現一個簡單的圖片庫效果，但是還是存在很多不規范的地方，比如是否支持平穩退化、結構和樣式是否分離、是否向后兼容？性能考慮，壓縮腳本等都可以考慮進來更好的完善圖片庫。
==========================我是分割線=================================================================
學習第五章之后，有了圖片庫改進版。第五章主要強調平穩退化，結構樣式分離，向后兼容，性能考慮等最佳實踐
1.改進版HTML代碼
<!--第一版本代碼；1、支持平穩退化，即如果瀏覽器禁用了js，那么用戶依然能夠訪問這些圖片而不是404只是體驗有所下降-->
<!--第一版本代碼；2、js代碼和html標記未分離，js onclick還在行間，那么使得js和a標簽分離需要一個“掛鈎”，此時我們給整個ul清單設置一個專有id如 id="gallerypic"-->
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Author" content="william"> 6 <meta name="Keywords" content="dom code art"> 7 <meta name="Description" content=""> 8 <link rel="stylesheet" type="text/css" href="css/layout.css"> 9 <script src="js/showPic.js"></script> 10 <title>圖片庫</title> 11 </head> 12 <body> 13 <!--第二版V2.0 改進點：使得HTML標記和JavaScript代碼進行分離--> 14 15 <h1>Photos<h1> 16 <ul id="gallerypic"><!--掛鈎，方便統一操作圖片清單--> 17 <li><a href="images/1.jpg" title="菊花" >第一張</a></li> 18 <li><a href="images/2.jpg" title="沙漠" >第二張</a></li> 19 <li><a href="images/3.jpg" title="八仙花">第三張</a></li> 20 <li><a href="images/4.jpg" title="燈塔" >第四張</a></li> 21 </ul> 22 <img id="zhanweifu" src="images/zhanwei.jpg" alt="占位"/> 23 <p id ="description">選擇一張照片</p> 24 </body> 25 </html>
取消了行內onclick事件並賦予ul一個id以便統一操作ul下的鏈接，那么我們需要添加事件處理函數
新建函數prepareGallery將有關操作關聯到onclick上
- 函數需要檢查瀏覽器是否理解getElementsByTagName。
- 函數需要檢查瀏覽器是否理解getElementByID。
- 函數需要檢查當前網頁是否存在id為imagegallery的元素
- 遍歷imagegallery元素中的所有鏈接
- 設置onclick事件，讓他在有關鏈接被點擊時完成一下操作：1，將鏈接作為參數傳給showPic函數；2，取消鏈接的默認行為不讓瀏覽器打開鏈接
改版后的js代碼新增了prepareGallery函數如下所示：
1 function showPic(whichPic){ //whichPic是形參，看具體調用的地方 2 //修改占位符圖片 3 var source = whichPic.getAttribute("href"); 4 var place = document.getElementById("zhanweifu"); 5 place.setAttribute("src",source); 6 //修改照片下方描述性文字 7 var text = whichPic.getAttribute("title") 8 var txt = document.getElementById("description"); 9 //alert(txt.firstChild.nodeValue)//firstChild等價於childNodes[0]並且更加直觀 於firstChild對應的還有個lastChild表示childNodes數組的最后一個元素 10 txt.firstChild.nodeValue = text ; 11 } 12 13 14 //第二版V2.0 分析：如果使得html和js分離 那么我需要把onclick事件與id進行一個綁定需要進行如下代碼編寫: 15 //1.檢查瀏覽器是否支持getElementsByTagname、getElementByID; 16 //2.判斷網頁是否存在id="gallerpic"的這樣一個元素； 17 //3.遍歷gallery元素中的所有鏈接; 18 //4.設置onclick事件讓他在相關鏈接被點擊時，將此鏈接作為參數傳遞給showPic並且取消鏈接被點擊時的默認行為不打開新的窗口. 19 function prepareGallery(){ 20 if(!document.getElementsByTagName){return false;} 21 if(!document.getElementById){return false;} 22 if(!document.getElementById("gallerypic")){return false;} 23 var gallery=document.getElementById("gallerypic"); 24 var links = gallery.getElementsByTagName("a"); 25 for(var i = 0;i<links.length;i++){ //for語句條件之間是分號不是逗號 要注意 26 links[i].onclick = function(){ 27 showPic(this);return false; 28 } 29 } 30 } 31 //下面是執行這個prepareGallery函數，需要等到頁面加載完onload之后，最簡單的辦法是定義一個匿名函數諸如 32 //window.onload = function(){ 33 // firstFunction(); 34 // secondFunction(); 35 //} 36 //最佳的辦法是調用addLoadEvent函數 37 function addLoadEvent(func){ 38 var oldonload = window.onload; 39 if(typeof window.onload != 'function'){ 40 window.onload = func; 41 }else{ 42 window.omload = function(){ 43 oldonload(); 44 func(); 45 } 46 } 47 } 48 addLoadEvent(prepareGallery)