首页 > 代码库 > dom对象

dom对象

一般常用的几个dom对象的函数

var oDiv =document.createElement("div");var text =document.createTextNode("baidu.com");oDiv.appendChild(text);var op=document.getElementById(‘ppp‘)document.body.insertBefore(oDiv,op);      var pa=document.getElementById(‘pa‘);pa.appendChild(oDiv)

小程序:自动增加一个1到10,用p标签

<script>var i=1;    var time1 = window.setInterval( function(){        var pi=document.createElement(‘p‘);    var text=document.createTextNode(i);    pi.appendChild(text);    document.body.appendChild(pi);    i++;       if (i==10)       {         clearInterval(time1);        }    }    , 3000)</script>

用dom实现9*9乘法表

<script>window.onload=function (){    var table =document.createElement(‘table‘);    var th =document.createElement(‘thead‘);    var tb =document.createElement(‘tbody‘);    var tf =document.createElement(‘tfoot‘);    table.border="1px #333 solid";      for(var i=0;i<9;i++)      {          tb.insertRow(i);          for(var j=0;j<=i;j++)          {            tb.rows[i].insertCell(j);            tb.rows[i].cells[j].appendChild(document.createTextNode((j+1)+‘ * ‘+(i+1)+‘ = ‘+((j+1)*(i+1)) +"   "));          }       }      table.appendChild(th);      table.appendChild(tb);      table.appendChild(tf);      document.body.appendChild(table);   }</script>

 通过dom改变样式

window.onload=function(){       var obj=document.createElement("div");       obj.appendChild(document.createTextNode(‘测试内容‘));    // obj.setAttribute(‘style‘, ‘color:#ffff;background:#900‘);    // obj.setAttribute(‘id‘, ‘o1‘);    // document.body.appendChild(obj);    obj.className=‘o1‘;    // obj.style.cssText="background:red;width:300px;height:300px;";    setTimeout(        function ()        {            obj.className=‘obj2‘;        }        , 5000);    document.body.appendChild(obj);}

  dom对象一般了解常用的函数就可以,要深入研究的,可以通过系统学习。谷歌度娘也行

 

dom对象