《JavaScript DOM編程藝術（第二版）》讀書總結

這本書是一本很基礎的書，但對於剛入前端不久的我來講是一本不錯的書，收穫仍是很大的，對一些基礎的東西理解得更加透徹了。

1.DOM即document object model的縮寫，文檔對象模型，JavaScript作的就是對DOM的操做，或者說對節點（node）的操做。

2.js中DOM、this這是都是對象，有屬性有方法。

3.document對象有body屬性，因此能夠直接寫成document.body，無需再獲取body元素（document.getElementsByTagName("body")[0]）,createElement建立出來的節點也是一個對象。

4.取得當前頁面的URL,window.location.href。

5.循環、判斷不會造成做用域，只有函數纔會造成，好比說下面這個代碼：

function fn(){
        if(1==1){
            alert(1)
            return false
            alert(2)
        }
        alert(3)
    }
    fn()

之前認爲1和3都會彈出，其實不是，這裏只會彈出1，雖然if語句中有大括號{ }，但它不會有造成做用域的做用，只有函數纔會造成，因此在函數fn裏return false後面的代碼都不會被執行。

6.書中四個比較有用的原生js函數。

①咱們都知道若是在body元素前加入script標籤引入js，那麼就必須寫上:

window.onload= function (){
       
}

意思是等文檔結構加載完畢再加載這個函數裏面的代碼，否則就沒法獲取DOM元素。書中給了另一種不寫這個函數的方法，將要執行的函數當作addLoadEvent函數的參數便可 ：

//onload事件共享函數
 function addLoadEvent(func){

     var oldonload=window.onload;
     if(typeof window.onload !="function"){
         window.onload=func;
     }else{
         window.onload =  function (){
             oldonload();
             func();
          }
     }
  }

②原生js沒有提供insertAfter方法，只有insertBefore方法，封裝insertAfter函數，參數是DOM對象：

function insertAfter(newElement,targetElement){
     var parent = targetElement.parentNode;
     if(parent.lastChild == targetElement){
         parent.appendChild(newElement);
     }else{
         parent.insertBefore(newElement,targetElement.nextSibling);
     }
  }

③動畫函數

//動畫函數
 function moveElement(elementID,final_x,final_y,interval){
     if(!document.getElementById) return false;
     if(!document.getElementById(elementID)) return false;
     var elem=document.getElementById(elementID);
     if(elem.movement){
         clearTimeout(elem.movement);
     }
     if(!elem.style.top){
         elem.style.top = "0px"
     }
     if(!elem.style.left){
         elem.style.left = "0px"
     }
     var xpos = parseInt(elem.style.left);
     var ypos = parseInt(elem.style.top);
     var dist = 0;
     if(xpos == final_x && ypos == final_y){
         return true;
     }
     if(xpos < final_x){
         dist = Math.ceil((final_x - xpos)/10);
         xpos = xpos + dist;
     }
     if(xpos > final_x){
         dist = Math.ceil((final_x - xpos)/10);
         xpos = xpos - dist;
     }
     if(ypos < final_y){
         dist = Math.ceil((final_y - ypos)/10);
         ypos = ypos + dist;
     }
     if(ypos > final_y){
         dist = Math.ceil((final_y - ypos)/10);
         ypos = ypos - dist;
     }
     elem.style.left = xpos + "px";
     elem.style.top =  ypos + "px";
     var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
     elem.movement = setTimeout(repeat,interval);
 }

用法如： moveElement("div",300,300,20)，第一個參數元素id，第二個第三個參數是元素最終的位置，第四個參數是時間間距。

④給一個元素添加類名的函數

//添加類名addClass函數
 function addClass(element,value){
     if(!element.className){
         element.className = value;
     }else{
         newClassName = element.className;
         newClassName+= " ";
         newClassName+= value;
         element.className = newClassName;
     }
  }

一同事看我讀這本書，老是對我講「看書沒有用，你仍是會忘記的」，我其實聽他說這話好幾回挺煩的，我沒有反駁他，我以爲這種話題真的不值得我去反駁。