DOM ------ 父节点&子节点

  //html代码
  <div class="box">
        <span class="demo"></span>
    </div>
    //js代码
    var demo = document.querySelector('.demo')
    // 得到的是离元素最近的父亲节点 如果找不到父节点 返回空
    console.log(demo.parentNode);
    //输出 <div class="box">
          // <span class="demo"></span>
        // </div>

  //html代码
  <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    //js代码
    var ul = document.querySelector('ul')
    var lis = ul.querySelectorAll('li')
    // 1.子节点(不常用)
    console.log(ul.childNodes[0].nodeType); //输出3 文本节点(文字 空格 换行)
    console.log(ul.childNodes[1].nodeType); //输出1 标签元素
    //2.children(常用) 获取所有的子元素节点
    console.log(ul.children) //输出 HTMLCollection(4) [li, li, li, li]