js操作节点

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

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

    3. 节点名称(nodeName)
        举例：
            <div id="father">
                <span id="son">孩子元素</span>
            </div>
        document.getElementById("father").id;   // 返回属性名： father
        document.getElementById("father").firstChild； // #text 文本节点
        document.getElementById("father").firstChild.nodeType； // 3(文本节点）

    例子：
    <div id="box"></div>
    <script>
        var box = document.getElementById("box");
        console.log(box.nodeType);   //1
        console.log(box.nodeValue);  //null
        console.log(box.nodeName);   //DIV
    </script>

获取页面元素

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"); //创建了一个<p></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会从文档原来的位置上被剪切
   
   例子：
   <div id="box">
       <span>第一个元素</span>
   </div>
   <span id="out">外面的span</span>
   
   <script>
       var dv = document.getElementById("box");
       var out = document.getElementById("out");
       dv.insertBefore(out,dv.firstChild);
   </script>
   执行插入之后：
   <div id="box">
       <span id="out">外面的span</span>
       <span>第一个元素</span>
   </div>
   

6. js删除节点

   removeChild：删除元素的子节点
   举例说明：
   <div>
       <span id="son">孩子元素</span>
   </div>  
   
   <script>
       var son = document.getElementById("son");
       son.parentNode.removeChild(son);
   </script>
   结果：页面中就只有<div></div>了，span元素被删除 
   

7. 替换节点

   replaceChild(new,target)：将target节点替换成new节点
   举例说明：
   <div id="box">
       <span id = sp></span>
   </div>
   <script>
       var box = document.getElementById("box");
       var sp = document.getElementById("sp");
   
       var p = document.createElement("p");
       box.replaceChild(p,sp);    //前面是要替换的成的，后面是被替换的
   
   //被替换的span标签还存在，只是不再页面中显示，我们可以给它放到一个指定的位置
   </script>
   

8. 克隆节点

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

9. 属性节点

   setAttribute("key","value") 设置属性
   getAttribute("key"）获取属性
   例如：
       <div id="box"></div>
       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只读