<body>
<div id="box">
<p>11</p>
<div id="box1">
<p>222</p>
</div>
<p>33</p>
</div>
</body>
<script>
var inbox = document.getELementById("box1"); //获取 box1 这个元素
//--------------------------------------------------
//父子关系的获取
inbox.parentNode; //获取父节点（获取一个） 也就是 id=box 的 div 返回Node类型
inbox.parenteLElement; //同上，只是返回的类型不一样 返回Element类型
//常用
inbox.children; //获取子节点（获取多个），返回的是一个htmlCollection
inbox.children[0]; //获取第一个子元素；
//firstChild 的获取包括了元素节点和文本节点，但没有其他节点在前的位置时，它也相当于获取第一个子元素节点；
inbox.firstChild; //获取第一个子节点（包含文本节点）
inbox.lastChild; //获取最后一个子节点（包含文本节点）
//--------------------------------------------------
//兄弟关系的获取 处在一级的标签元素
//只能获取前一个或后一个
inbox.nextSibling; //下一个兄弟节点 返回元素名 p
inbox.previousSibling; //上一个兄弟节点 返回元素名 p
inbox.nextElementSibling; //下一个兄弟元素节点，没有返回null，有返回 <p>33</p>
inbox.previousElementSibling; //上一个兄弟元素节点，没有返回null，有返回 <p>11</p>
</script>
