dom元素的增删查改

标签：替换   使用   获取   利用   style   setattr   常见   属性   rtb   

https://www.jianshu.com/p/b0aa846f4dcc

1.0DOM操作增删改查

 2对于不同DOM节点的操作总结

    虽然上面也全面的总结了相关的操作，但其实在查询使用时我更喜欢根据节点的NodeType来操作，因此对于属性节点和元素节点的常见操作分别归纳了一下

 2.1元素节点

2.1.1  添加 （先创建再添加）

　　创建

   　　  document.createEelement()    创建元素节点

     　　当然使用 innerHTML，cloneChild的方法也能实现创建元素的目的

 　　 加入
   　　 * appendChild    追加到结尾处
    　　* innerHTML
   　　 * insertBefore   

2.1.2  删除元素

　　最常用得当然是removeChild （） ;

      关于删除子元素：

　　　　 // 从 node 中删除 一个 div
 　　　　　　node.removeChild( divDOM );
　  　　 // 假设 node 节点中只有一个元素 div
　　　　　　 node.innerHTML = ‘‘;

2.1.3修改节点 一般都是删除再加入，即removeChild+appendChild，也可以使用replaceChild() 直接替换

先总结这些，其实DOM的方法虽然多，但好在常用的很少见，希望大家可以在理解DOM结构的基础上熟练操作DOM的apl。

  3.2 元素节点  

  3.2.1 添加属性    

    doucment.createAttribute()  创建属性节点

    使用 setAttribute 添加属性
        // 添加自定义, 非标准的属性 ( DOM-Core ) 

　　　　div.setAttribute( ‘attrName‘, ‘attrValue‘ );
    使用 .xxx = vvv利用对象的动态特性添加属性  
        // 添加的标准属性( HTML-DOM )
                div.attrName = ‘attrValue‘; 
    第三种( 了解 )使用 DOM 节点方法
        // 纯 DOM-Core 的做法
                var attrNode = document.createAttribute( ‘test‘ );//创建属性节点对象
                attr.nodeValue = ‘测试‘;  //设置属性值
                div.setAttributeNode( attrNode );   //添加给div
    区别
        div.setAttributeNode(attrnode对象）
        div.setAttribute（‘属性名‘，‘属性值‘）；

3.2.2 删除
        removeAttribute（’属性名’）
        removeArrtibuteNode（节点对象名）

　　　　//removeAttribute 是 为了 简化node.removeAttribute( ‘属性名‘ ),不用先获取属性节点再删除，而是直接操作元素节点;

3.33   获取
    getAttribute(‘属性名 ‘)  获取属性值  //简化了node.getAttributeNode( ‘属性名‘ );

    getAttributeNode（‘属性名‘）  获取属性节点对象   

  // var attrNode = node.getAttributeNode( ‘属性名‘ );
  // attrNode.nodeValue;

dom元素的增删查改

标签：替换   使用   获取   利用   style   setattr   常见   属性   rtb   

原文地址：https://www.cnblogs.com/ganiner/p/11518465.html