JavaScript-DOM下

一、节点遍历

1 、parentNode

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

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

2、childNodes

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>

3、firstChild

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>

4、lastChild

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>

5、nextSibling

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>

6、previousSibling

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-->元素

1、firstElementChild

firstElementChild 找第一个子元素节点

2、lastElementChild

lastElementChild 找最后一个子元素节点

3、nextElementSibling

nextElementSibling 下一个兄弟元素节点

4、previousElementSibling

previousElementSibling 上一个兄弟元素节点

5、childElementCount

childElementCount 统计所有的子元素节点个数

6、children

children 获取所有的子元素节点（返回一个数组）

7、parentElement

parentElement 获取父元素节点

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

三、节点操作方法

1、appendChild()

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

语法:

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

2、insertBefore()

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

语法:

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

3、replaceChild()

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

语法：

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

4、removeChild()

removeChild(exichild)方法

用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点

语法:

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

5、cloneNode()

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

语法:

被克隆的对象.cloneNoe(参数)

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

四、创建元素与删除元素

1、document.createElement()

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

语法：

document.createElement(元素名字)

2、document.createTextNode()

createTextNode()创建一个文本节点

语法:

document.createTextNode(文本内容)

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

3、对象.remove()

remove() 方法删除当前对象

语法:

当前对象.remove()