js操作节点

DOM节点的三个属性（节点类型、节点值、节点名称）

    1. 节点类型（nodeType）
        1： 元素节点
        2： 属性节点
        3： 文本节点
    2. 节点的值(nodeValue)
        元素节点返回null，属性节点返回属性值，文本节点返回文本。
        nodeValue可读可写，但是对元素节点不能写，一般用于设置文本节点的值。

    3. 节点名称(nodeName)
        举例：
            

                孩子元素
            
        document.getElementById("father").id;   // 返回属性名： father
        document.getElementById("father").firstChild； // #text 文本节点
        document.getElementById("father").firstChild.nodeType； // 3(文本节点）

    例子：
    

    

获取页面元素

1. js中获取页面元素

   var dv = document.getElementById("boxId");   //根据Iid获取
   var dv = document.getElementsByTagName("div") //根据标签名获取(是伪数组）
   var dv = document.getElementsByClassName("claName") //根据类名获取
   
   // html5中的方法，类似于jQuery选择器
   var dv = documen.querySelector("") //""里面可以是.box #id div 
   var dv = documen.querySelectorAll();  //返回伪数组
   

2. 创建节点

   createElement("tagName")
   例如：
   var p = document.createElement("p"); //创建了一个
   标签
   // 创建的节点要添加到文档中才会显示
   

3. 创建文本节点

   createTextNode("text")
   例如：
   var txt = document.createTextNode("哈哈哈");
   // 创建的节点要添加到文档中才会显示
   

4. 添加子节点

   appendChild(dom)  //dom 为节点对象
   例如：
   document.body.appendChild(dom) //在body的末尾追加
   

5. js插入节点

   insertBefore(newChild,targChild):在当前元素的targChild元素前面插入newChild节点，newChild会从文档原来的位置上被剪切
   insertAfter(newChild,targChild): 在targChild后面插入节点newChild，newChild会从文档原来的位置上被剪切
   
   例子：
   
       第一个元素
   
   外面的span
   
   
   执行插入之后：
   
       外面的span
       第一个元素
   
   

6. js删除节点

   removeChild：删除元素的子节点
   举例说明：
   
       孩子元素
     
   
   
   结果：页面中就只有
   了，span元素被删除 
   

7. 替换节点

   replaceChild(new,target)：将target节点替换成new节点
   举例说明：
   
       
   
   
   

8. 克隆节点

   dom.cloneNode(false)   //默认，克隆dom节点，不克隆事件
   dom.cloneNode(true)    //连同dom的事件也一起克隆
   

9. 属性节点

   setAttribute("key","value") 设置属性
   getAttribute("key"）获取属性
   例如：
       
   
       document.getElementById("box").getAttribute("id")  //结果：box
       document.getElementById("box").setAttribute("id","hhhh");
       document.getElementById("box").getAttribute("id")  //结果：hhhh
   

10. 兄弟节点

    firstChild          访问第一个子节点（包括换行）
    firstElementChild   访问第一个子元素节点（IE低版本不支持）
    
    lastChild           访问最后一个子节点（包括换行）
    lastElementChild    访问最后一个子元素节点（IE低版本不支持）
    
    childNodes          获取所有子节点（包括换行）
    children            获取所有子元素节点（不存在兼容问题）
    
    兄弟节点
    
    nextSibling         获取下一个兄弟节点（包含换行）
    nextElementSibling  获取下一个兄弟元素节点（IE低版本不支持）
    
    previouseSibling    获取上一个兄弟节点（包含换行）
    previouseElementSibling  获取上一个兄弟元素节点（IIE低版本不支持）
    
    父节点（虽无兼容性，但也是节点的一个操作）
    parentNode 
    返回节点的父节点。document.parentNode返回null，其他的情况下都将返回一个元素节点，因为只有元素节点拥有子节点，除了document外任何节点都拥有父节点。parentNode只读