<!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>Document</title> </head> <body> <span>qwe</span> <div class="box"><span>1</span> <p>2</p> hello <!-- 这是注释 --> <em>3</em></div> <span>zxc</span> </body> <script> 其他节点选择器: 关系: 父选子: var obox = document.querySelector(".box") console.log(obox.childNodes) //) [span, text, p, text, comment, text, em] 上一个兄弟: var obox = document.querySelector(".box") console.log(obox.previousSibling) //#text 下一个兄弟: var obox = document.querySelector(".box") console.log(obox.nextSibling) //#text 第一个子: var obox = document.querySelector(".box") console.log(obox.firstChild) //<span>1</span> 最后一个子: var obox = document.querySelector(".box") console.log(obox.lastChild) //<em>3</em> </script> </html>
空格注释都算节点