DOM节点

<!-- 
        html标签元素
          <div id="d1">元素一</div>
        
        document文档对象模型

          html文档中的所有元素都可以看作是dom节点对象
          
          整个文档 document对象
          html标签  根对象
          每个html标签元素 元素节点对象
          内容            文本节点对象
          属性            属性节点对象


     -->

层次结构获取节点

<!-- 
        children
          => 所有子元素节点
        childNodes
          => 所有节点包含文本节点


<div id="d1">
        <p>元素一</p>
        <span>元素二</span>
        <h2>标题</h2>
    </div>

<script>
        var divRootEle = document.querySelector('#d1')
        var childNodeArray = divRootEle.childNodes  //返回当前节点的所有子节点
        console.log('childNodeArray.length :',childNodeArray.length); //长度7
        
        console.log('divRootEle.firstElementChild: ',divRootEle.firstElementChild);
            //<p>元素一</p>

        console.log('divRootEle.firstChild: ',divRootEle.firstChild);
        //#text

        console.log('divRootEle.lastElementChild: ',divRootEle.lastElementChild);
        //<h2>标题</h2>

         console.log('divRootEle.lastChild: ',divRootEle.lastChild);
        //#text

        
         var spanEle = document.querySelector('span')


         console.log('spanEle.nextElementSibling: ',spanEle.nextElementSibling); 
         //<h2>标题</h2>

         console.log('spanEle.nextSibling: ',spanEle.nextSibling); 
         //#text
        
          console.log('spanEle.previousElementSibling: ',spanEle.previousElementSibling); 
          //<p>元素一</p>

         console.log('spanEle.parentElement: ',spanEle.parentElement); 
        //<div id="d1"> 父元素
            
    </script>

dom节点知识点小结

       1. dom节点
            - 每个html标签、标签属性、内容、注释...都被看成dom节点
       2. 节点分类
             元素节点
             属性节点
             文本节点
             注释节点
             document文档节点
       3. 节点树形结构
            document
               html
          head      body
       
       4. 获取dom节点
         - getElement系列
         - queryselector系列
         
         - 层次结构
            parentElement  父节点
            children  子元素节点
            firstElementChild
            lastElementChild
            nextElementSibling
            previousElementSibling
         - 非常规节点获取
             document.body

知识回顾:
      - 获取元素节点
         + getElement系列
         + queryselector系列
         + 层次结构

      - 操作内容 
         + dom.innerHTML = 内容
         + dom.innerText = 内容
         + 表单dom.value = 内容
      - 操作样式
         + dom.style.样式名=样式值
         + dom.className = 样式类名
         + dom.classList.add(样式类名)
      - 操作属性
         + dom.getAttribute(属性名)
         + dom.setAttribute(属性名，属性值)
         + dom.removeAttribute(属性名)

      - 事件绑定
         dom.onclick=function(){
           //事件触发执行
         }
         

    案例
      - tab选项卡
        + 思路:
            1. 定义一个选中效果class样式active
            2. 清除原来的选中效果
                循环遍历所有元素
            3. 给选中Tab元素设置active选中效果
                选中Tab元素
                    两种实现方式:
                    + 事件属性
                    + 事件绑定