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