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);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性。将写入的内容...
    candy252324阅读 564评论 0 0
  • 下面是水平和垂直居中的方法: 1.Flex 方案 2.Grid 方案 3.absolute + transform...
    李奕锦liyijin阅读 580评论 0 2
  • 先来说一段故事吧,很老套的,就是十七八岁少男少女青涩的暗恋的故事,就像那些年我们一起追得女孩一样,只不过我要讲故事...
    归途大咖阅读 442评论 0 0
  • 想写一篇文章很久了,自我从西藏回来后一直都在想着写。以前上学老师说要写日记,每天都要写,可是十几岁的孩子哪里有这么...
    十三生万物阅读 328评论 0 0