js之节点操作，为什么要学习节点操作

获取元素的方式

1.DOM方式

逻辑性不强，繁琐

<div>woshi1</div>
    <span>woshispan</span>
    <ul>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
    </ul>
    <div class="box">
        <span class="er"></span>
    </div>

我们要一个个获取 比如获取var ul = document.querarySelector('div'),然后获取ul里面的li,我们还要写var lis = ul.querySelectorAll('li'),比较繁琐

2.利用节点的层次关系，父子兄

逻辑性强，但是兼容性较差

节点

页面中的所有内容都是节点

节点至少有nodeType(节点类型）、nodeName(节点名称）、nodeValue(节点值）

元素节点nodeType为1，属性节点2，内容节点3，我们主要操作元素节点。

节点操作-父节点parentNode

返回最近的父节点，找不到返回null

  <div class="box">
        <span class="er"></span>
    </div>
<script>
        //父节点 parentNode
        var er = document.querySelector('.er');
        //  var box = document.querySelector('.box');之前
        //拿到父节点 得到的离元素最近的父节点 找不到返回null
        console.log(er.parentNode);
    </script>

节点操作-子节点

childNodes得到所有的(亲）子节点，包括元素节点和文本节点属性节点等

  <ul>
        <li class="lii">woshi1i</li>
        <li>woshi1i</li>
        <li>woshi1i</li>
        <li>woshi1i<span>123</span></li>
    </ul>
  // Dom
        var ul = document.querySelector('ul');
        // var lis = document.querySelectorAll('li');//之前
        //子节点 childNodes得到所有的子节点，包含元素节点和文本节点等等