<!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>
空格注释都算节点