妙味课堂视频总结

最新推荐文章于 2018-11-03 20:09:19 发布

原创最新推荐文章于 2018-11-03 20:09:19 发布 · 401 阅读

CC 4.0 BY-SA版权

1、childNodes：获取子节点 children不会把空文本当子节点，是childNodes的兼容版
childNodes在火狐浏览器下会把空文本节点当子节点来处理
(1)

<span style="font-size:12px;"><head>
      <script type="text/javascript">
      window.onload=function ()
       {
          alert(document.body.childNodes[0].nodeType);  //显示body里面的内容，弹出3(文本节点)
          //alert(document.body.childNodes[1].nodeType);  //显示body里面的内容，弹出1(元素节点)
       }
      </script>
      </head>
      <body>
          aaafsa
          <span>fff</span>
     </body></span>

(2)

<span style="font-size:12px;"><head>    
     <script type="text/javascript">
     window.onload=function ()
      {
          var oUl=document.getElementById('ul1');
          var i=0;
          for(i=0;i<oUl.childNodes.length;i++)
             {
               if(oUl.childNodes[i].nodeType==1)        //childNodes一般和NodeType一起使用
                 {
                     oUl.childNodes[i].style.background='red';  
                  }
             }
      }
     </script>
     </head>
     <body>
     <ul id="ul1">
          <li></li>
          <li></li>
          <li></li>
     </ul>
     </body></span>

2、parentNode：父节点

<span style="font-size:12px;">window.onload=function()
      {
        var aA=document.getElementsByTagName('a');
        var i=0;
        for(i=0;i<aA.length;i++)
        {
            aA[i].onclick=function()
            {
                this.parentNode.style.display='none';
            }
        }
      }
      <body>
        <ul>
            <li>qqq<a href="javascript:;">隐藏</a></li>
            <li>zzz<a href="javascript:;">隐藏</a></li>
            <li>vvv<a href="javascript:;">隐藏</a></li>
            <li>fff<a href="javascript:;">隐藏</a></li>
            <li>ooo<a href="javascript:;">隐藏</a></li>
        </ul>
      </body></span>

3、offsetParent:寻找当前元素用来定位的父级

<span style="font-size:12px;">  <div id="div1" style="width:100px; height:100px; background:red; margin:100px;">
  <div onclick="alert(this.offsetParent.tagName)" id="div2" style="width:100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div>
  </div></span>

4、首尾子节点：firstChild/firstElementChild lastChild/lastElementChild

<span style="font-size:12px;"> window.onload=function()
     {
        var oUl=document.getElementById('ul1');
        oUl.firstChild.style.background='red';    //IE
        //oUl.firstElementChild.style.background='red'    //FF
     }
     <body>
     <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>
     </body></span>

   *****经测试，firstChild不管是在IE下还是FF下都没有作用，不知道哪里错了，如果有人知道，请留言，谢谢！
      处理兼容性：
      var oFirst=oUl.firstElementChild||oUl.firstChild;
          oFirst.style.background='red';
   兄弟节点：nextSibling/nextElementSibling   previousSibling/previousElementSibling 兼容性同上
   5、操作元素属性（3种方法）

<span style="font-size:12px;"> window.onload=function()
     {
        var oTxt=document.getElementById('txt1');
        //oTxt.value='123'     //第一种
        //oTxt['value']='abc'        //第二种
        oTxt.setAttribute('value','eref');    //设置：setAttribute(名称, 值)  获取：getAttribute(名称) 删除：removeAttribute(名称)
     }
<input type="text" id="txt1"/></span>

   6、如何用className选择元素
      (1)选出所有元素
      (2)通过className条件用一个循环来一个个判断筛选

<span style="font-size:12px;">  window.onload=function()
       {
        var oUl=document.getElementById('ul1');
        var aLi=oUl.getElementsByTagName('li');
        var i=0;
        for(i=0;i<aLi.length;i++)
            {
                  if(aLi[i].className=='box')
                     {
                         aLi[i].style.background="red";
                      }
            }    
       }
       <ul id="ul1">
            <li></li>
            <li class="box"></li>
            <li></li>
            <li class="box"></li>
            <li></li>
       </ul></span>

用class选元素(封装成函数，方便使用)

<span style="font-size:12px;"> function getByClass(oParent,sClass)
       {
           var aEle=oParent.getElementsByTagName('*');   //所有标签
           var aResult=[];
           var i=0;
           for(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');
            var i=0;
            for(i=0;i<aBox.length;i++)
                {
                    aBox[i].style.background="yellow";
                }
        }</span>

7、appendChild

<span style="font-size:12px;"> <script type="text/javascript">
                window.onload=function()
                      {
                            var oBtn=document.getElementById('btn1');
                            var oUl=document.getElementById('ul1');
                            oBtn.onclick=function()
                               {
                                      var oLi=document.createElement('li');
                                      oUl.appendChild(oLi);   //父.appendChild(子节点)        
                                }
                      }    
 </script>
 </head>
 <body>
       <input id="btn1" type="button" value="创建Li"/>
       <ul id="ul1">
             <li>aaa</li>
       </ul>    
 </body></span>

8、insertBefore(子节点，谁之前)

<span style="font-size:12px;"> <script type="text/javascript">
      window.onload=function()
         {
             var oTxt=document.getElementById('txt1')
             var oBtn=document.getElementById('btn1');
             var oUl=document.getElementById('ul1');
             oBtn.onclick=function()
                  {
                      var oLi=document.createElement('li');
                      var aLi=oUl.getElementsByTagName('li')
                      oLi.innerHTML=oTxt.value;
                      oUl.insertBefore(oLi,aLi[0]);
                   }
          }    
</script>
</head>
<body>
     <input id="txt1" type="text"/>
     <input id="btn1" type="button" value="创建Li"/>
      <ul id="ul1">
           <li>aaa</li>
      </ul>    
 </body>      </span>

9、如果ul里面一个li都没有:

<span style="font-size:12px;">  <script type="text/javascript">
        window.onload=function()
            {
                 var oTxt=document.getElementById('txt1')
                 var oBtn=document.getElementById('btn1');
                 var oUl=document.getElementById('ul1');
                 oBtn.onclick=function()
                      {
                           var oLi=document.createElement('li');
                           var aLi=oUl.getElementsByTagName('li')
                           oLi.innerHTML=oTxt.value;
                           if(aLi.length=0)
                                 {
                                      oUl.appendChild(oLi);
                                  }
                           else
                                  {
                                      oUl.insertBefore(oLi,aLi[0]);
                                   }
                        }
       
             }    
 </script>
  </head>
  <body>
       <input id="txt1" type="text"/>
       <input id="btn1" type="button" value="创建Li"/>
       <ul id="ul1">
        </ul>    
  </body> </span>

10、removeChild

<span style="font-size:12px;">   <script>
        window.onload=function()
          {
              var aA=document.getElementsByTagName('a');
              var oUl=document.getElementById('ul1');
              var i=0;
              for(i=0;i<aA.length;i++)
                 {
                    aA[i].onclick=function()
                         {
                             oUl.removeChild(this.parentNode);    //父.removeChild(子节点)
                         }
                
                }
       
  </script>
  <body>
  <ul id="ul1">
        <li>adef<a href="#">删除</a></li>
        <li>1234<a href="#">删除</a></li>
        <li>vrg<a href="#">删除</a></li>
        <li>12z<a href="#">删除</a></li>
  </ul>
  </body></span>