⭐DOM下day-10

【节点遍历 】

• 节点的遍历跟节点之间的关系密不可分，简单概括就是子找父，父找子，兄弟找兄弟这种关系。

parentNode 找到当前节点对象的父节点，如果指定的节点没有父节点则返回 null

        <div>
            <div id="dv"></div>
        </div>
            <script> 
                var dv=document.getElementById('dv'); 
                console.log(dv.parentNode);//返回dv的父节点 
    </script>

childNode 找到当前节点的所有子节点（返回一个数组）

        <ul id="uu">
            <li>子元素</li>
            <li>子元素</li>
            <li>子元素</li>
            <li>子元素</li>
        </ul>
            <script> 
        var uu=document.getElementById('uu'); 
        console.log(uu.childNodes);//返回uu所有的子节点 
    </script>

firstChild 找到当前节点的第一个子节点

        <ul id="uu">
            <li>子元素</li>
            <li>子元素</li>
            <li>子元素</li>
            <li>子元素</li>
        </ul>
            <script> 
        var uu=document.getElementById('uu'); 
        console.log(uu.firstChild);//返回uu第一个子节点 
    </script>

lastChild 找到当前节点的最后一个子节点

  <ul id="uu">
            <li>子元素</li>
            <li>子元素</li>
            <li>子元素</li>
            <li>子元素</li>
        </ul>
            <script> 
        var uu=document.getElementById('uu'); 
        console.log(uu.lastChild);//返回uu最后一个子节点 
    </script>

nextSibling 找到当前节点下一个兄弟节点

        <ul id="uu">
            <li>鸣人</li>
            <li id="myLi">佐助</li>123
            <li>卡卡西</li>
            <li>小樱</li>
        </ul>
            <script> 
            var myLi=document.getElementById('myLi'); 
            console.log(myLi.nextSibling);//返回myLi下一个兄弟节点 
    </script>

PreviousSibling 找到当前节点的上一个兄弟节点

        <ul id="uu">
            <li>鸣人</li>abc
            <li id="myLi">佐助</li>123
            <li>卡卡西</li>
            <li>小樱</li>
        </ul>
        <script> 
                var myLi=document.getElementById('myLi'); 
                console.log(myLi.previousSibling);//返回myLi前一个兄弟节点 
       </script>

【元素树遍历】

• 元素树遍历和节点数遍历的最大区别是元素树遍历的时候只会找所有的元素节点，而节点树会找所有的的节 点element-元素

注意：大部分情况元素遍历比节点遍历更加简单

firstElementChild 找第一个子元素节点
lastElementChild 找最后一个子元素节点
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
childElementCount 统计所有的子元素节点个数
children 获取所有的子元素节点（返回一个数组）
parentElement 获取父元素节点

【节点操作方法】

appendChild() 在当前元素节点的尾部追加一个新的子节点语法

当前对象.appendChild(新节点);

insertBefore() 在指定的元素节点前插入一个新的节点语法

当前对象.insertBefore(新元素节点,指定的元素节点);

replaceChild() 方法 ，用于替换节点，两个参数，第一参数是要插入的新节点，第二个是要被替换
掉的节点，返回被替换的节点语法

当前对象.replaceChild(新元素节点，被替换的元素节点)

removeChild(exichild) 方法，用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点语法

当前对象.removeChild(删除元素节点)

cloneNode() 方法用于克隆一个节点语法:

被克隆的对象.cloneNoe(参数) 
参数：布尔值，默认值为false，规定是否进行深度克隆， 
如果参数为true，那么将克隆Node节点以及它的后代节点， 
如果参数为false，那么只克隆Node节点本身。

【创建元素与删除元素】

createElement(元素名字) 给当前文档创建一个新的节点语法

document.createElement(元素名字);

注意： 创建完元素节点后一般都会先往元素节点中填充完内容后再添加到页面中去 
var tr = document.createElement(“tr”); 
tr.innserHTML=”<td></td>”;

createTextNode() 创建一个文本节点语法

document.createTextNode(文本内容);

【对象.remove()】

remove() 方法删除当前对象语法

当前对象.remove();