WebAPI-DOM树，获取父节点、获取子节点的方法汇总

DOM树

DOM树 又称为 文档树模型，就是把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加载到当前的页面中。

DOM树 就像人类家族的族谱，族谱可以很容易的表明家族成员之间的关系，将复杂的关系简明地表示出来。

节点操作

获取父节点

通过 parentNode 属性可以获取指定节点的父节点；如果指定的节点没有父节点就会返回 null，如果存在则返回父节点对象

语法：

node.parentNode

• node 需要获取父节点的节点

<button id="btn">按钮</button>
<div id="box">
  <span id="sp">span元素</span>
</div>

<script>
  function $(id) {
     
    return document.getElementById(id)
  }

  $('btn').onclick = function() {
     
    // 获取元素父节点并打印
    console.log($('sp').parentNode)
  }
</script>