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对象一般了解常用的函数就可以，要深入研究的，可以通过系统学习。谷歌度娘也行