混淆篇之原生DOM操作方法小结

　

1.0   DOM结构

1.1先来看结构图：

父节点
        兄弟节点
        当前节点
            属性节点
            子节点
        兄弟节点
一般任意一个节点我们都会从父节点，子节点，以及兄弟节点的角度去考察。节点一般我们只需关注元素节点，属性节点及文本节点即可。

1.2  节点的相关属性（只读的）

1.2.1 nodeType  属性规定节点的

        nodeType = 1  元素节点   记住

        nodeType = 2  属性节点   记住

        nodeType = 3  文本节点   记住

        nodeType = 8  注释节点

        nodeType = 9  文档

        nodeType = 11   document.fragment

 

1.2.2 nodeName 属性规定节点的名称

 

         元素节点  nodeName = 标签的名称

         console.log(elementNode.nodeName);          //会将标签名大写打印出来

         文本节点  nodeName = #text

        console.log(textNode.nodeName);   //#text

        属性节点  nodeName = 属性的名称

        console.log(attrNode.nodeName);   //attr name

 

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