JS小练习之childNodes，children，parentNode，offsetparent，firstChild与firstElementChild的用法

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>DOM基础</title>
    <style></style>
    <script type="text/javascript">
    window.onload=function(){
      var oUl=document.getElementById('ul1');
      // alert(oUl.childNodes.length); //返回5
      //与原因在于childNodes包含了所有的节点：文本节点、文本节点、
      // for(var i=0;i<oUl.childNodes.length;i++){
      //   //文本节点 3   文本节点 1
      //   alert(oUl.childNodes[i].nodeType); //返回3 1 3 1
      // }

      //一种过滤掉childNodes中文本节点的方法：
      // for(var i=0;i<oUl.childNodes.length;i++){
      //   if(oUl.childNodes[i].nodeType==1){  //如果是元素节点
      //     oUl.childNodes[i],style.background='red';
      //   }
      // }

      //children属性就只包含元素节点,而且兼容性非常好
      //这里返回的子节点只包含下一层的子节点（不包含子节点的子节点）
      // alert(oUl.children.length);  //返回2

      //父节点 parentNode
      // alert(oUl.parentNode);  //返回 object HTMLBodyElement

      //来一个应用父节点的小例子 点击／隐藏
      // var aA=document.getElementsByTagName('a');
      // for(var i=0;i<aA.length;i++){
      //   aA[i].onclick=function(){
      //     this.parentNode.style.display='none';
      //   }
      // }


      //offsetparent
      //复习一个CSS小知识点：绝对定位是根据什么定位的？
      //是根据该元素的有定位的父元素来定位的，如果上一级父元素没有定位，就去找上上一级父元素，直到找到有定位的
      //父元素或者是到body
      //那么offsetparent就是可用来获取一个元素可以用来定位的那个父级元素，根据样式不同是会发生变化的


      //firstChild与firstElementChild的区别
      // var oUl=document.getElementById('ul1');
      //IE6-8在才能使用
      // oUl.firstChild.style.background='red';
      //高级浏览器下才能使用
      // oUl.firstElementChild.background='red';

      //如何解决兼容性问题？
      // if(oUl.firstElementChild){
      //   oUl.firstElementChild.background='red';
      // }
      // else{
      //    oUl.firstChild.style.background='red';
      // }

    }
    </script>
  </head>
  <body>
    <!-- 对应前面的笔记
    <ul id='ul1'>
      <li></li>
      <li></li>
    </ul> -->

    <!-- 对应父节点的小栗子 -->
    <ul id='ul2'>
      <li>sskskjnbbh <a href="javascript:;">隐藏</a></li>
      <li>znxnnai <a href="javascript:;">隐藏</a></li>
      <li>ssk <a href="javascript:;">隐藏</a></li>
      <li>sskskjnbbhmsmsm<a href="javascript:;">隐藏</a></li>
      <li>jnbbh <a href="javascript:;">隐藏</a></li>
    </ul>



  </body>


</html>
JS小练习之childNodes，children，parentNode，offsetparent，firstChild与firstElementChild的用法

猜你喜欢
