JS 节点操作

一、获取元素节点

   
    JS 获取元素有两种方式
    1.通过DOM提供的方法 getElementsById()、querySelector()、getElementsByClassName等方法
      但是太过于繁琐

     2.通过结点的方式 利用父子兄节点关系获取元素
     .parentNode .childNodes .children
     
     //在只知道父节点或者某个节点想要获取他的兄弟节点或者父子节点使用第二种方式可以简化操作
   

1.示例

    /*
       <div>
           <img src = ''>
       </div>
    */
    
    //普通获取方法：
    let div = document.querySelector('div')
    let img = div.querySelector('img')
    
    //通过节点获取:
    let div = document.querySelector('div')
    
    div.children[0] //这个就是div第一个子节点 即img

2.获取父节点操作

    <div class = "out">
        <div class = "in"></div>
    </div>
    
    let divIn = document.querySelector('in') //获取内层div元素
    
    //获取父节点out
    divIn.parentNode  //即为外层的out元素 只能获取最近的父节点

3.获取子节点操作

    <div class = "out">
        <div class = "in"></div>
    </div>
    
    let out = document.querySelector('out')  //获取外层div元素
    
    //获取子节点方法
    //1.element.childNodes     []以伪数组形式存储 存储所有节点 (很少用)
      out.childNodes      //[text,div.in,text] 在这里JS将换行也当成了节点即text, text是文本节
                          //点
                          
    //2.获取元素节点element.children  也是以伪数组形式 只存储元素节点 (常用)
    out.children          // [div.in]  只有元素节点
    

4.获取第一个或最后一个节点

    <div class = 'out'>
        <button></button>
        <img>
        <a href = 'javascript:;'></a>
    </div>
    
    let out = document.querySelector('.out')
    
    //1.第一个节点 firstChild 最后一个节点lastChild (很少用)
      out.firstChild   //text文本节点 因为button前面有换行 换行会被当成text文本节点
      out.lastChild    //text文本节点 a后面也有换行 
    
    //2.第一个元素节点firstElementChild 最后一个元素节点lastElementChild (常用 低版本ie有兼容性问题)
      out.firstElementChild  //button 元素节点
      out.lastElementChild   //a 元素节点
    
    //3.通过children 获取第一和最后
      out.children[0]  //第一个元素节点
      out.children[out.children.length-1]  //最后一个元素节点
    

5.获取兄弟节点

    <div></div>
    <button></button>  //两者为兄弟节点
    
    let div = document.querySelector('div')

    //1.nextSibling 获得下一个兄弟节点 previousSibling上一个
      div.nextSibling   //文本节点
      div.previousSibling  //文本节点

    //2.nextElementSibling获得下一个兄弟元素节点 previousElementSibling上一个兄弟元素节点 ie > 9
        div.nextElementSibling   //元素节点 button
        div.previousElementSibling   //null div没有上一个兄弟元素节点

二、增删改查元素节点

1.创建添加元素节点

    <div></div>
    let div = document.querySelector('div')
    
    //创建元素节点 document.createElement('元素名')
    let btn = document.createElement('button')
    let a = document.createElement('a')
    
    //添加元素节点(追加) element.appendChild(child)
    div.appendChild(btn)   //将按钮加入到了div中 成为了 div子节点
    
    //添加元素节点(前插) 添加到某元素之前 element.insertBefore(元素,某元素)
    div.insertBefore(a,btn)  //将a插到了button之前
    
    /*此时
         <div>
             <a></a>
             <button></button>
         </div>
    */

2.克隆节点

    <div>
        <ul>
            <li>li节点</li>
        </ul>
    </div> 
    
    let ul = document.querySelector('ul')
    let div= document.querySelector('div')

    //1.克隆节点语句 node.cloneNode(true|false)
    // 无参数或者参数false时只复制本节点 不复制值 也不复制子节点
    // 参数为true时复制节点也复制值

    //1.无参数 node.cloneNode(false)
    div.appendChild( ul.cloneNode() ); //只克隆了ul这个节点 克隆体没有li
    /*<div>
        <ul>
            <li>li节点</li>
        </ul>
        <ul></ul>  <!--克隆体-->
    </div>*/
    
    //2.有参数true node.cloneNode(true)
    div.appendChild( ul.cloneNode(true) )  //克隆ul 克隆体有li 以及li节点的值
        
   /*<div>
        <ul>
            <li>li节点</li>
        </ul>
        <ul>   <!--克隆体-->
            <li>li节点</li>
        </ul>
    </div>*/

3.删除节点

    //node.removeChild(child)
    
    <div>
       <button></button> 
    </div>
    
    let div = document.querySelector('div')
    let btn = document.querySelector('button')
    
    div.removeChild(btn)   //div删除了button节点
    /*
     <div></div>
    */