js一起学10：DOM高级——offsetParent、scrollBottom、焦点事件、image对象和toFixed、表单...

一、新的属性操作方式 （1）. （2）[ ] （3）getAttribute(属性名)-----获取自定义属性 （4）setAttribute(属性名，属性值)----设置属性 （5）setAttribute配合getAttribute使用 oBtn.setAttribute('index','2'); alert(oBtn.getAttribute('index')); 二、offsetParent 获取定位的父级 offsetTop：元素距离其offsetParent上边框的距离

例子：

<style>

*{margin:0; padding:0;}

#div1{width:500px; height:400px; background:#ccc; margin:10px; padding:10px;}

#div2{width:400px; height:300px; background:yellow; margin:10px;padding:10px; position:absolute; top:40px; left:40px;}

#div3{width:300px; height:200px; background:red; margin:10px;}

</style>

 var oDiv3 = document.getElementById('div3');

 var oDiv2 = oDiv3.offsetParent;

 var j3 = oDiv3.offsetTop;  //oDiv3有10px的margin，其有定位的父级oDiv2有10px的padding，所以是20px

 var j2= oDiv2.offsetTop;   //为啥是50px呢？因为oDiv2是绝对定位，所以位置和oDiv1没有关系，所以offsetTop是top的10px加上margin的10px

 alert(j2+j3);

三、scrollBottom=scrollTop+clientHeight if(top<scrollBottom){     显示 }

例：图片延时加载

function getPos(obj){

 var t =0;

 var l =0;

 while(obj){

  t+=obj.offsetTop;

  l+=obj.offsetLeft;

  obj=obj.offsetParent;

 }

 return {top:t,left:l};

}

window.onload=function(){

 var aImg = document.getElementsByTagName('img');

 loadImgs();

 window.onscroll=window.onresize=loadImgs;

 function loadImgs(){

  for(var i=0;i<aImg.length;i++){

   var top = getPos(aImg[i]).top;

   var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

   var scrollBottom = scrollTop+document.documentElement.clientHeight;

   if(top<scrollBottom){

    aImg[i].src=aImg[i].getAttribute('_src');

   }

  }

 };

};

四、获取元素 getElementsByTagName getElementsByName getElementsByClassName children（不是真正的数组，用不了数组的函数） 五、scrollHeight---获取内容的高度 var oDiv = document.getElementById('box'); alert(oDiv.scrollHeight);  alert(document.body.scrollHeight); 例子：瀑布流 function rnd(n,m){      return parseInt(n+Math.random()*(m-n)); } function createLi(){      var oLi=document.createElement('li');      oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';      oLi.style.height=rnd(120,350)+'px';      return oLi; } window.onload=function(){      var aUl=document.getElementsByTagName('ul');      create();      function create(){           for(var i=0;i<20;i++){                var oLi=createLi();                var arr=[];                for(var j=0;j<aUl.length;j++){                     arr.push(aUl[j]);                }                arr.sort(function(oUl1,oUl2){                     return oUl1.offsetHeight-oUl2.offsetHeight;                });                arr[0].appendChild(oLi);           }      }      window.onscroll=function(){           var height=document.body.scrollHeight; //内容高度           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;           if(scrollTop>=height-document.documentElement.clientHeight-500){                setTimeout(function(){                     create();                },300);           }      } } 六、焦点事件 1.  onfocus   获取焦点事件      onblur     失去焦点 2.  focus()  设置焦点      blur()     取消焦点 输入框自动获取焦点 window.onload=function(){     var oInp=document.getElementsByTagName('input')[0];     var oS=document.getElementsByTagName('span')[0];     oInp.onfocus=function(){         oS.style.display='none';     }     oInp.onblur=function(){         if(oInp.value==''){             oS.style.display='block';         }     }     oS.onclick=function(){         oS.style.display='none';         oInp.focus();     } } 七、tofixed 保留几位小数  alert(0.55555555.toFixed(0)); 八、image对象 new Image(); onload---当图片加载完成时 onerror---当加载失败时 例子：进度条 window.onload=function(){     var oDiv1=document.getElementById('div1');     var oDiv2=document.getElementById('div2');     var count=0;     for(var i=0;i<77;i++){         var oImg=new Image();         oImg.onerror=function(){             alert(this.src+'加载失败');         }         oImg.onload=function(){             count++;             var scale=count/77;             oDiv2.innerHTML=(scale*100).toFixed(2)+'%';             oDiv2.style.width=oDIv1.offsetWidth*scale+'px';             if(count==77){                 alert('加载完成');             }         }         oImg.src="http://www.zhinengshe.com/works/3525/img/"+i+".jpg";     } } <div id="div1">     </div id="div2"></div> </div。 九、表单 1. 把数据提交给服务器     action 地址      name 名字      submit 提交     id是给前台用的。name给后台用的。 name可以重复      getElementsByName 通过name获取一组元素 2. method----提交方式  （1）get   数据在url中（适合分享）  默认的     容量很小   32k      不安全  post 数据不在url中（无法分享）              容量非常大  1G      相对安全 
http://tieba.baidu.com/home/main?un=%E8%90%8C%E9%A6%85%E5%B0%8F%E6%B1%A4%E5%9C%86&ie=utf-8&fr=pb 

https security---安全http协议 （花钱）