1.什么是DOM遍历？
DOM遍历，可以简单地理解为“查找元素”。举个例子，如果你使用getElementById()等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这种操作涉及的就是DOM遍历
2.查找父元素
在JavaScript中，我们可以使用parentNode属性来获得某个元素的父元素
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TEXT</title> <style type="text/css"> #box { width: 100px; height: 100px; background-color: hotpink; } #fatherBox { width: 200px; height: 200px; background-color: red; } </style> <script src="js/index.js"></script> </head> <body> <div id="fatherBox"> 父元素内容 <div id="box"> </div> </div> <input type="button" value="点击变化" id="btn"/> </body> </html>
window.onload=function () { var oBtn = document.getElementById("btn"); var oBox = document.getElementById("box"); var oParentBox = oBox.parentNode; oBtn.onclick = function() { oParentBox.style.backgroundColor = "orange"; }; }
初始的内容：
点击按钮之后发生了变色：
3.查找子元素
在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
childNodes、firstChild、lastChild children、firstElementChild、lastElementChild
其中，childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。（不常用）
而children获取的是所有的元素节点，不包括文本节点。
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function() { var oBtn=document.getElementById("btn"); var oUl=document.getElementById("list"); oBtn.onclick=function() { oUl.removeChild(oUl.lastElementChild); } } </script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> <input id="btn" type="button" value="删除" /> </body> </html>
firstElementChild获取的是第一个子元素节点，lastElementChild获取的是最后一个子元素节点。如果我们想要获取任意一个子元素节点，可以使用children[i]的方式来实现
4.查找兄弟元素
在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。
previousSibling、nextSibling previousElementSibling、nextElementSibling
previousSibling用于查找前一个兄弟节点，nextSibling用于查找后一个兄弟节点。previousElementSibling用于查找前一个兄弟元素节点，nextElementSibling用于查找后一个兄弟元素节点
跟查找子元素的两组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果只操作元素节点，建议使用previousElementSibling和nextElementSibling
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function() { var oBtn=document.getElementById("btn"); var oUl=document.getElementById("list"); 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> <li>Vue.js</li> </ul> <input id="btn" type="button" value="删除" /> </body> </html>
