parentNode父节点
childNodes所有类型节点，children 元素类型节点(children更常用)
firstChild第一个所有类型节点(不常用)
lastChild最后一个所有类型节点(不常用)
nextSibling获取下一个所有类型节点，nextElementSibling获取下一个html元素节点
previousSibling获取上一个所有类型节点，previousElementSibling获取上一个html元素节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .myClass{ background-color: red; } body{ font-size: 40px; } </style> </head> <body> <div id = "myDiv1"> 我在mydiv1中 <p class="myClass" id = "myP1">我在myP1中</p> <ul id = "ul1"> <li class="myClass" id="li1">1</li> <li id = "li2">2</li> <li id = "li3">3</li> </ul> </div> <script> //parentNode // childNodes（children） // firstChild // lastChild // nextSibling（nextElementSibling） // previousSibling（previousElementSibling） //------------parentNode---------- /* var p = document.getElementById("myP1"); var p_Parent = p.parentNode; console.log(p_Parent.innerHTML);*/ //------------childNodes所有类型节点,children元素类型节点(children更常用)---------- /* var div = document.getElementById("myDiv1"); var nodes = div.children; for(var i = 0; i<nodes.length; i++){ console.log(nodes[i].id); }*/ //------------firstChild、lastChild所有节点(不常用)---------- /*var div = document.getElementById("myDiv1"); console.log(div.firstChild,div.lastChild);*/ //------------nextSibling获取下一个所有类型节点，nextElementSibling获取下一个html元素节点---------- /* var p = document.getElementById("myP1"); console.log(p.nextElementSibling);*/ //------------previousSibling获取上一个所有类型节点，previousElementSibling获取上一个html元素节点---------- var p = document.getElementById("ul1"); console.log(p.previousElementSibling); </script> </body> </html>