前言：
DOM遍历，可以简单理解为“查找元素”的意思。举个例子，如果你使用getElementById()等方法获取一个元素，然后又想得到该元素的父元素，子元素，甚至是下一个兄弟元素，这就是DOM遍历，分为三种情况：
查找父元素
查找子元素
查找兄弟元素
DOM遍历也就是查找元素，主要以“当前多选元素”为基点，然后查找它的父元素，子元素或者兄弟元素。
1.查找父元素
在JavaScript总，我们可以使用parentNode属性来获得某个元素的父元素。
语法：
obj.parentNode
说明：
obj是一个DOM对象，指的是使用getElementById(),getElementsByTagName()等方法获取的元素。
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<style type="text/css">
table{border-collapse: collapse;}
table,tr,td{border:1px solid gray;}
</style>
<script>
window.onload=function()
{
var oTd=document.getElementsByTagName("td");
//遍历每一个td元素
for(var i=0;i<oTd.length;i++)
{
//为每一个td元素添加点击事件
oTd[i].onclick=function()
{
//获得当前td的父元素（即tr）
var oParent=this.parentNode;
//为当前td的父元素添加样式
oParent.style.color="white";
oParent.style.background="red";
}
}
}
</script>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<td>小明</td>
<td>80</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小芳</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
分析;
这个例子实现的效果就是：当我们随便点击一个单元格时，就会为该单元格所在的行设置样式。也就是说，我们要找到当前td元素的父元素（即tr）。如果我们尝试使用querySelector()和querySelectorAll()是没办法实现的。
2.查找子元素
在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素
childNodes,firstChild,lastChild
children,firstElementChild,lastElementChild
其中，childNodes获取的是所有的子节点。。注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有元素节点，不包括文本节点。
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<script>
window.onload=function()
{
var oUl=document.getElementById("list");
var childNodeslen=oUl.childNodes.length;
var childrenLen=oUl.children.length;
alert("childNodes的长度为："+childNodeslen+"\n"+"children的长度为："+childrenLen);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
分析：
children.length获取的是元素节点的长度，返回结果是3，childNodes.length获取的是子节点（包括元素节点和文本节点)的长度,返回的结果是7
其实对于ul元素来说，childNodes包括了三个子元素节点和四个子文本节点。我们可以看到每一个li元素之间都是换行的。每一次换行就是一个空白节点。JavaScript会把这些空白节点当作文本节点处理。
由于每次换行就是一个子节点，注意第一个li前面也有一次换行，最后一个li后面也有一次换行，因为都在ul元素中，肯定是要算的。
3.查找兄弟元素
在JavaScript中，我们可以使用以下两组方式来获得兄弟元素。
previousSibling,nextSibling
previousElementSibling,nextElementSibling
previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点
跟查找子元素的两组方式一样，previousSiblinlg和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果只想操作元素节点，建议用previousElementSibling和nextElementSibling。
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<script>
window.onload=function()
{
var oUl=document.getElementById("list");
var oBtn=document.getElementById("btn");
oBtn.onclick=function()
{
var preElement=oUl.children[2].previousElementSibling;
oUl.removeChild(preElement);
};
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
分析：
我们实现的是把第三个元素的前一个兄弟元素删除。这里如果用previousSibling来代替previousElementSibling就实现不了了。