培训第三节课笔记（DOM,）

HTML5第三节课笔记

一．定时器，延时器

setInterval (反复执行)----------clearInterval

setTimeout(只执行一次)-----------clearTimeout   //延时用到倒计时

一般集合运动使用

实例：小鱼移动

  var oFish=document.getElementById('fish');

     var timer=null;

     timer=setInterval(function(){

                if(oFish.offsetLeft<=150)

                {

                    clearInterval(timer);

                   

                }

                else{

                   

                 oFish.style.left=oFish.offsetLeft-7+'px';  

                    }

                },50);

 

二．动态修改样式：

（1）className属性 将样式作为单独的样式，适合提前就知道样式

<style>

        /*#myDiv{

            width:200px;

            height:200px;

           

        }*/

        /*.forback{

            background:red;

        }*/

     </style>

 

      oDiv=document.getElementById('myDiv');

                    oDiv.className='forback';

 

(2)style属性：odiv.style.backgroundColor="red";

      style属性适宜于值的动态改变

 

 

三dom操作之value属性

   一般用于input中  可以获取值，也可以修改值

<input type="text" value="yang"id="myname" data-mytest="world" />

              <script>

              varoInput=document.getElementById('myname');

              //alert(oInput.value);

              //oInput.value="hello";

 

四.dom操作之setAttribute与getAttribute

           <inputtype="text" value="yang" id="myname"data-mytest="world" />

       <script>

       varoInput=document.getElementById('myname');

      <input type="text" value="yang"id="myname" data-mytest="world" />

       <script>

       varoInput=document.getElementById('myname');

 

 

五.dom操作之innerHtml

   <div id="mydiv">

       <divid="div1">1111</div>  

       </div>

       <script>

       //innerHTML 内部标签的所有内容 不断拼接内部的东西

          varoDiv=document.getElementById('mydiv');

          //oDiv.innerHTML="<inputtype='text'/>";

 

 

6.dom操作之document.createElement

7.dom操作之document.createTextNode

8.dom操作之元素.appendChild 

var oP=document.createElement('p');

           varospan=document.createTextNode('hello world');//文本节点

           oP.appendChild(ospan);

           oDiv.appendChild(oP);//appendChild不会删除原来的，始终加到元素的底部

 

 

 9.dom操作之元素.insertBefore

   varoDiv1=document.querySelector('#div1');

           //就近父级 op加到oDiv1前面

           //上拉刷新 下拉刷新

           oDiv.insertBefore(oP,oDiv1);

 

 

10.dom操作元素之firstChild
lastChild
childNodes集合

一般不建议使用childNodes[]节点中一般包含空格之类的不好查找。