JavaScript--元素节点之间关系

元素节点之间的关系

主要划分为父元素 子元素 兄弟元素（同胞元素）

<div id="box">
         <span>000</span>
         abc<div id="innerBox">123<b>4</b>456</div>efg
          <p>2</p>
         <a>3</a>
</div>

//box 里面包含了div和对应的p和a标签
//innerbox里面包含了b标签
 var innerBox = document.getElementById('innerBox') //获取innerbox这个元素
 
// 父节点 parentNode （只有一个）
console.log( innerBox.parentNode);  //获取父节点 就是box 返回Node
console.log(innerBox.parentElement); //获取父元素 返回element

//子节点 children 获取子节点（获取的是多个）返回的是一个htmlCollection
console.log(innerBox.children); //获取所有的子元素节点
console.log(innerBox.children[0]);  //获取第一个子元素（常用的）

//节点集合
consle.log(innerBOX.childNodes);  //返回所有的子节点（会包含元素节点 文本节点 属性节点）

//获取第一个/最后一个子节点（相当于 innerBo