<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>兄弟节点previousSibling、nextSibling</title> <!-- node.previousSibling;返回node节点的前一个兄弟节点 node.nextSibling;返回node节点的后一个兄弟节点 注意：浏览器会把HTML文档的空格部分解析成文档兄弟节点，也就是说如果节点前面或后面有空格，那么它的前/后的兄弟节点就是text --> </head> <body> <div> <a href="#">1、第一个链接</a><p>2、第一个段落</p><span>3、第一个span</span> </div> <script> var p=document.getElementsByTagName("p")[0]; var previous=p.previousSibling; var next=p.nextSibling; console.log(previous);//<a href="#">1、第一个链接</a> console.log(next);//<span>3、第一个span</span> </script> </body> </html>