原生DOM操作方法小结

dom结构

 

1 /***nodetype  属性规定节点的
2         nodetype = 1  元素节点   记住
3         nodetype = 2  属性节点   记住
4         nodetype = 3  文本节点   记住
5         nodetype = 8  注释节点
6         nodetype = 9  文档
7         nodetype = 11   document.fragment
8 ***/

/*** nodename 属性规定节点的名称
 
         元素节点  nodename = 标签的名称
         console.log(elementnode.nodename);          //会将标签名大写打印出来
         文本节点  nodename = #text
        console.log(textnode.nodename);   //#text
        属性节点  nodename = 属性的名称
        console.log(attrnode.nodename);   //attr name

***/

/***nodevalue 属性规定节点的值。
 
        元素节点  nodevalue =  null;
        文本节点  nodevalue = 文本的内容
        属性节点  nodevalue = 属性的值

***/

 

 

2.0dom操作增删改查

2.1. 查询

就是获取元素

1. 标准 dom api
   • doucment.getelementbyid
   • document.getelementsbytagname
   • document.getelementsbyname
   • document.getelementsbyclassname
   • document.queryselectorall
2. 亲属访问
3. 属性获取
   • getattribute
   • getattributenode

2.2. 增加

1. 创建
   • document.createeelement 创建元素节点
   • document.createtextnode 创建文本节点
   • doucment.createattribute 属性节点
   • innerhtml
   • innertext
   • clonenode()  
2. 加入
   • appendchild 追加到结尾处
   • innerhtml
   • insertbefore 用法?将元素插入到某一个元素的前面

     父元素.insertbefore( 新元素, 旧元素 );
     // 将 新元素 插入到 旧元素 的前面
     

3. 其他
   • style 的操作
   • setattribute( 属性名, 属性值 )

2.3. 删除

1. 删除元素
   • removechild
   • removeattributenode

2.4 修改

1. 修改节点
   • 删除节点再加入
2. 修改样式
   • style.xxx = vvv;
   • setattribute
3. 修改文本
   • innerhtml
   • innertext
   • 节点操作
   • nodevalue
4. 修改属性
   • .xxx = vvv
   • setattribute修改属性
   • replacechild()    

 3对于不同dom节点的操作总结

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

 3.1元素节点

3.1.1  添加 （先创建再添加）

　　创建

   　　  document.createeelement()    创建元素节点

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

 　　 加入
   　　 * appendchild    追加到结尾处
    　　* innerhtml
   　　 * insertbefore   

3.1.2  删除元素

　　最常用得当然是removechild （） ;

      关于删除子元素：

　　　　 // 从 node 中删除 一个 div
 　　　　　　node.removechild( divdom );
　  　　 // 假设 node 节点中只有一个元素 div
　　　　　　 node.innerhtml = '';

3.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;