• 第五讲 DOM基础


    DOM基础:

      什么是DOM:其实就是dovument,div获取、修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作;

      浏览器支持情况:IE(IE7-8,10%支持率,IE9跟火狐差不多)、Chrome(60%左右的支持率)、FF(99%的支持率)

    DOM节点:其实标签(CSS)、元素(JS)、节点(DOM)意思一样,只不过在不同文件中的叫法不一样而已

      childNodes  nodeType

        abcdefghijklmn...文本节点
        <span>哈哈哈……</span>元素节点  

        获取子节点      

        <script>
            window.onload=function(){
              var oUL=document.getElementById('ul1');
              alert(oUL.childNodes.length); //火狐、IE9等版本,返回值为5,但是在IE6-8返回的是2,即两个<li>标签
            };
        </script>     
    
        <ul id=”ul1”>   //该空白区及下一行标签前空白区域,属于第一个节点                                            
            <li>qqqq</li>      //本行标签属于第二个节点      //该空白区及下一行标签前空白区域,属于第三个节点                   
            <li></li>   //本行标签属于第四个节点       //该空白区及下一行标签前空白区域,属于第五个节点                                           
        </ul>

       需要注意的是,节点没有style样式的(但是在IE7,文本节点会有样式,即可在JS中修改“节点”样式),但是所有节点会有一个nodeType(节点类型)    

      <script>
          window.onload=function(){
            var oUL=document.getElementById('ul1');
            for (var i=0; i<oUl.childNodes.length; i++){
              //oUL.childNodes[i].style.background='red'; //修改样式无果,因为节点没有样式
              // alert(oUL.childNodes[i].nodeType); //nodeType=3表示文本节点共3个;nodeType=1表示元素节点,共2个。
              if (oUL.childNodes[i].nodeType==1){
                oUL.childNodes[i].style.background='red';
              }
            }
          };
      </script>
    
       <ul id=”ul1”> //该空白区及下一行标签前空白区域,属于第一个节点
        <li>qqqq</li> //本行标签属于第二个节点 //该空白区及下一行标签前空白区域,属于第三个节点
        <li></li> //本行标签属于第四个节点 //该空白区及下一行标签前空白区域,属于第五个节点
      </ul>

       children属性,比childNodes更方便,它与childNodes很相似,但是最大的不同是,children属性只包括元素,不包括文本,而且在<li>标签内的节点只属于<li>的子节点,而不属于<ul>的子节点     

    <script>
        window.onload=function(){
            var oUL=document.getElementById('ul1');
            alert(oUL.children.length);   //返回值为2,表示两个<li>标签
        };
    </script>  

      parentNode:父节点,如上面代码<ul>是<li>的父节点    

    var oUL=document.getElementById('ul1');
    alert(oUL.parentNode); //返回值为[object HTMLBodyElement] 即body标签

        例子——点击链接,隐藏整个li:    

            <script>
          window.onload=function(){
            var aA=document.getElementsByTagName('a');
            for(var i=0; i<aA.length; i++){
              aA[i].onclick=function(){
                this.parentNode.style.display='none';
              };
            }
          };
        </script>
    
        <ul id="ul1">
          <li>aaaaa<a href="javascript:;">隐藏</a></li>
          <li>bbbbb<a href="javascript:;">隐藏</a></li>
          <li>ccccc<a href="javascript:;">隐藏</a></li>
          <li>ddddd<a href="javascript:;">隐藏</a></li>
          <li>eeeee<a href="javascript:;">隐藏</a></li>
          <li>fffff<a href="javascript:;">隐藏</a></li>
        </ul>    

      offsetParent:例子——获取元素在页面上的实际位置

        补充:CSS中绝对定位的元素,是根据谁定位的呢,它是根据有定位的父级来进行定位的,比如说,某个元素节点直接父级没有定位,则往上找,即找其父级的父级是否有定位,依次往上找,如果一直没有,直至找到<body>为止,

        offsetParent:就是用来寻找某一个元素,用来定位的父级,如果一直没有,直到找到<body>为止    

            <style>
          #div1{width: 200px; height: 200px; background: #cccccc; margin: 100px; position: relative;}
          #div2{width: 100px;height: 100px;background: red; position: absolute; left: 50px; top: 50px;}
        </style>
        <script>
          window.onload=function () {
            var oDiv2=document.getElementById('div2');
            alert(oDiv2.offsetParent); //返回[object HTMLDivElement],当去掉#div1的相对定位返回的值即为[object HTMLBodyElement]
         };
        </script>
        <body>
          <div id="div1"><div id="div2"></div></div>
        </body>    

     

      首位子节点:firstChild:第一个子节点(适用于IE6-8等低版本浏览器)、firstElementChild:第一个子节点(适用于IE9以上等高版本浏览器)、lastChild:最后一个子节点(适用于IE6-8等低版本浏览器)、lastElementChild(适用于IE9以上等高版本浏览器);所以有兼容性问题  

    var oUl=document.getElementById('ul1');
      // oUl.firstChild.style.background='red';  //适用于IE6-8等低版本浏览器
      // oUl.firstElementChild.style.background='red';   //适用于高版本等高级浏览器
      // 为了解决兼容问题,可以用以下方法:
      if (oUl.firstElementChild){     //如果oUl.firstElementChild存在,则执行
          oUl.firstElementChild.style.background='red';
      } else {    //否则执行
          oUl.firstChild.style.background='red';
      }

      兄弟节点:nextSibling:下一个兄弟节点(适用于IE6-8等低版本浏览器)、nextElementSibling下一个兄弟节点(适用于IE9以上等高版本浏览器)、previousSibling:上一个兄弟节点(适用于IE6-8等低版本浏览器)、previousElementSibling上一个兄弟节点(适用于IE9以上等高版本浏览器);所以同上理,有兼容性问题  

    操纵元素属性:

      语素属性操作:(三种方法效果一样)

        第一种:oDiv.style.display="block";

        第二种:oDiv.style["display"]="block";

        第三种:DOM方式: oDiv.setAttribute('dispaly', 'block');    

      DOM方式操作元素属性:

        获取:getAttribute(名称)

        设置:setAttribute(名称, 值)

        删除:removeAttribute(名称)

    DOM元素灵活查找:

      前面讲过获取元素的方法有:getElementById();  getElementsByTagName();

      用className选择元素:

        如何用className选择元素

          选出所有元素

          通过className条件筛选      

              var oUl=document.getElementById('ul1');
          var aLi=oUl.getElementsByTagName('li');
    
          for (var i=0; i<aLi.length; i++){
            if (aLi[i].className=='box'){
              aLi[i].style.background='red';
            }
          }

        封装成函数     

            //把获取元素className属性的代码封装成一个函数
        function getByClass(oParent, sClass){
          var aResult=[]; //定义空数组,作用是把所有找到的元素放入该数组中
          var aEle=oParent.getElementsByTagName('*'); //其中 * 表示通配符,表示获取所有
    
          for (var i=0; i<aEle.length; i++){
            if (aEle[i].className==sClass){ //筛选满足调剂的标签
              aResult.push(aEle[i]);
            }
          }
          return aResult;
        }
    
        window.onload=function(){
    
          var oUl=document.getElementById('ul1');
    
          var aBox=getByClass(oUl, 'box');
          for (var i=0; i<aBox.length; i++){
            aBox[i].style.background='red';
          }
        };        
  • 相关阅读:
    wikiquote
    zz 勵志貼,成功是努力加对的方向
    # 电纸书
    # 崔寶秋
    好的程序員
    深度学习引擎
    再见乱码:5分钟读懂MySQL字符集设置
    Linux基础:用tcpdump抓包
    Linux基础:文件查找find
    Linux基础:xargs命令
  • 原文地址:https://www.cnblogs.com/han-bky/p/10089709.html
Copyright © 2020-2023  润新知