Dom操作方法

Dom(Document Object Model)文档对象模型的方法如下：

<ul id='ul1'>

        <li></li>

        <li></li>

</ul>

①获取子节点

ul1.childNodes   该方法存在兼容的问题，在高版本的浏览器会获取到5个字节                               点 ，在IE6-8中获得2个。

ul1.childNodes[1].NodeType==1;

ul1.children        兼容性好，会获得2个子节点，只认亲儿子 

②获取父节点

ul1.parentNode   

ul1.offsetParent    //获得元素前面有定位的父级

③获取第一个子元素

ul1.firstChild /ul.lastChild                //兼容问题，只能用于IE7-8

ul1.firstElementChild   /  ul.lastElementChild //高版本浏览器

④设置属性

btn.setAttribute('value','按钮');

btn.getAttribute('value');

btn.removeAttribute('value');

⑤创建、插入和删除元素

var li=document.createElement('li');    //创建一个节点

ul.appendChild(li);    //为ul插入li

var lis=document.getElementByTagName('li');

ul.insertBefore(li,lis[0]);   //往ul中插入li，在第一个li之前

ul.removeChild(li);        //删除获取到的li

⑥文档碎片：是一个容器，可以一直存入创建的元素

var oFrag=document.createDocumentFragment();

for(var i=0;i<1000;i++){

    var li=document.createElement('li');

    oFrag.appendChild(oLi);

}

  oUl.appendChild(oFrag);