《JavaScript DOM編程藝術》學習整理

時間 2020-09-14

標籤 javascript dom 編程藝術學習整理欄目 JavaScript 简体版

原文原文鏈接

《JavaScript DOM編程藝術》真是入門js的神書，很是推薦想入門的去看這本書。本篇文章主要是記錄本身學習的一些筆記和代碼實例。css

1、前五章html

前五章主要經過DOM和html以及css建立了個能實現基本功能需求的圖片庫node

主要介紹了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.CSSdom

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 <!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)