細談JavaScript dom編程----個人筆記

時間 2019-11-06

標籤細談 javascript dom 編程個人筆記欄目 JavaScript 简体版

原文原文鏈接

第一次進書店買書，就被《JavaScript DOM編程藝術》一書所吸引，這是一本介紹JavaScript入門的神書， css

內容介紹： html

前面幾章介紹JavaScript的歷史 node

後面纔是實例，編程

如HTML代碼：數組

         <!doctype html> 
       
         <htmllang="en"> 
       
          <head> 
       
           <metacharset="UTF-8"> 
       
           <metaname="Author"content="william"> 
       
           <metaname="Keywords"content="dom code art"> 
       
           <metaname="Description"content=""> 
       
           <linkrel="stylesheet"type="text/css"href="css/layout.css"> 
       
           <scriptsrc="js/showPic.js"></script> 
       
           <title>圖片庫</title> 
       
          </head> 
       
          <body> 
       
         <h1>Photos<h1> 
       
          <ul> 
       
          <li><ahref="images/1.jpg"title="菊花"onclick="showPic(this);return false;">第一張</a></li> 
       
          <li><ahref="images/2.jpg"title="沙漠"onclick="showPic(this);return false;">第二張</a></li> 
       
          <li><ahref="images/3.jpg"title="八仙花"onclick="showPic(this);return false;">第三張</a></li> 
       
          <li><ahref="images/4.jpg"title="燈塔"onclick="showPic(this);return false;">第四張</a></li> 
       
          </ul> 
       
          <imgid="zhanweifu"src="images/zhanwei.jpg"alt="佔位"/> 
       
          <pid="description">選擇一張照片</p> 
       
          </body> 
       
         </html>

2.CSS 瀏覽器

2.1整篇圖片庫css代碼，這裏不對css學習作過多總結，css須要另行總結，只是放出代碼 dom

         body{ 
       
         font-family:"Helvetica","Arial",serif; 
       
         color:#333; 
       
         background-color:#ccc; 
       
         margin:1em10%; 
       
         } 
       
         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代碼進行分離-->

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)
```
其實jQuery就是JavaScript的庫。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。