js的DOM編程藝術筆記（三）

1.JS實現動畫效果：【動畫就是讓元素的位置隨着時間不斷的發生變化】

2.使用js編寫動畫效果：使用到setTimeout()方法來使得元素進行方向的移動

【核心：1.setTimeout()方法; 2.編碼圖片的來回閃動，確保只有一個setTimeout()函數，使用元素的屬性做【eleNode.moveFlag：自定義屬性】爲變量接受 setTimeout的返回值,t同時使用clearTimeout來刪除其餘的setTimeout()；3.函數的封裝】

//移動函數
function  doMove(eleId, final_x, final_y ,interval){
 var eleNode = document.getElementById(eleId);
 var px = parseInt(eleNode.style.left);
 var py = parseInt(eleNode.style.top);
 if(eleNode.moveFlag){
     clearTimeout(eleNode.moveFlag);
 }
 if(px<final_x){
     px++;
 }
 if(px>final_x){
     px--;
 }
 if(py<final_y){
     py++;
 }
 if(py>final_y){
     py--;
 }
 eleNode.style.left = px+"px";
 eleNode.style.top = py+"px";
 
 var repeat = "doMove('"+eleId+"',"+final_x+","+final_y+","+interval+")";
eleNode.moveFlag = setTimeout(repeat, interval); //遞歸執行domove()函數

}

3：【待解決問題】在window.onload = function(){
    var lis = document.getElementsByTagName("li");
    for(var i = 0; i<lis.length;i++){
        lis[i].onclick = function(){
            this.style.fontWeight = "bold";//this和lis[i]的區分【js的閉包問題？？】
        }
    }
}

 

4.js的DOM編程藝術的總結：

1.在DOM中節點就是對象

2.元素節點；文本節點；屬性節點三者的關係【見筆記一中的圖】

3.有些方法或者屬性是針對不一樣的節點的【使用過程當中注意】

4.每個節點都有 nodeName, nodeType, nodeValue 這三個基本的屬性

5.遍歷節點： childNodes屬性 ： 找到給定元素節點的全部元素節點和文本節點【其中空格換行也被看成文本節點; children屬性只返回全部的元素節點】；firstChild :第一個子節點 ； lastChild :最後一個子節點 ； nextSibling：給定元素的下一個節點【給定元素必需要和鈣元素有共同的父節點，不然返回null】; parentNode : 返回父節點【parentNode只能返回一個元素節點，由於只有元素節點纔會有子節點】；

previousSibling：返回給定元素的上一個元素【若是給定元素的前面沒有同一個父節點的節點，則會返回null】

6.js寫一個 一直返回的是元素節點的函數

function getEleNode(eleId){  var parentNode = document.getElementById(eleId);  var aryNode = parentNode.childNodes;  var aryEle = new Array();  var j =0;  for(var i=0;i<aryNode.length; i++){   if(aryNode[i].nodeType == 1){     aryEle[j] = aryNode[i];     j++;   }  }  return  aryEle; }