《JavaScript DOM编程艺术（第二版）》读书总结

时间：2022-11-21 16:51:13

这本书是一本很基础的书，但对于刚入前端不久的我来说是一本不错的书，收获还是很大的，对一些基础的东西理解得更加透彻了。

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;
     }
  }

一同事看我读这本书，总是对我讲“看书没有用，你还是会忘记的”，我其实听他说这话好几次挺烦的，我没有反驳他，我觉得这种话题真的不值得我去反驳。

相关文章