說到最常見的DOM應用,恐怕就要數(shù)取得特定的某個或某組元素的引用,然后再執(zhí)行一些操作了.取得元素的操作可以使用document對象的幾個方法來完成.其中,Document類型為此提供了兩個方法：getElementById()和getElementsByTagName(). ?第一個方法,getElementByld(),接受一個參數(shù)：要取得的元素的ID.如果找到相應的元素則回該元素,如果不存在帶有相應ID的元素,則返回null.注意,這里的ID必須與頁面中元素的id特性(attribute)嚴格匹配,包括大小寫.以下面的元素為例：
? ?

Some text

? ?可以使用下面的代碼取得這個元素：
? ?var div=document.getElementByld("myDiv"); //取得

元素的引用
? ?但是,下面的代碼在除IE之外的所有瀏覽器中都將返回null:
? ?var div=document.getElementByld("mydiv"); //無效的ID(在IE中可以)
? 如果頁面中多個元素的ID值相同,getElementByld()只返回文檔中第一次出現(xiàn)的元素.IE7及
較低版本還為此方法添加了一個有意思的“怪癖"：name特性與給定ID匹配的表單元素(、

.<button>及<select>)也會被該方法返回.如果有哪個表單元素的name特性等于指定的ID.而且該元素在文檔中位于帶有給定ID的元素前面,那么IE就會返回那個表單元素.來看下面的例子：<br />
? ?<input type="text"name="myElement" value="Text field"><br />
? ?<div   class="7tptamu"   id="myElement">A div</dIV><br />
? ?基于這段HTML代碼,在IE7中調用document.getElementByld("myElement"),結果會返回<input>元素;而在其他所有瀏覽器中,都會返回對<div>元素的引用.為了避免IE中存在的這個問 題,最好的辦法是不讓表單字段的name特性與其他元素的ID相同. ? 另一個常用于取得元素引用的方法是getElementsByTagName().這個方法接受一個參數(shù),即要取得元素的標簽名,而返回的是包含零或多個元素的NodeList.在HTML文檔中,這個方法會返回一個HTMLCollection對象,作為一個“動態(tài)"集合,該對象與NodeList非常類似.例如,下列代碼會取得頁面中所有的<img>元素,并返回一個HTMLCollection：<br />
? ?var images=document.getElementsByTagName("img");<br />
? ?這行代碼會將一個HTMLCollec tion對象保存在1mages變量中.與NodeList對象類似,可以使用方括號語法或item()方法來訪問HTMLCollection對象中的項.而這個對象中元素的數(shù)量則可<br />
? 以通過其length屬性取得,如下面的例子所示：<br />
? ?alert(images.length); //輸出圖像的數(shù)量<br />
? ?alert( images[0].src); //輸出第一個圖像元素的src特性<br />
? ?alert( images.item(o).src); //輸出第一個圖像元素的src特性<br />
? ?HTMLCollection對象還有一個方法,叫做namedItem().使用這個方法可以通過元素的name特性取得集合中的項.例如,假設上面提到的頁面中包含如下<img>元素：<br />
? ?<img src="myimage.gif" name="myImage"><br />
? 那么就可以通過如下方式從Images變量中取得這個<img>元素：<br />
? var mylmage=images.namedltem("mylmage");<br />
? 在提供按索引訪問項的基礎上,HTMLCollection還支持按名稱訪問項,這就為我們取得實際想要的元素提供了便利.而且,對命名的項也可以使用方括號語法來訪問,如下所示：<br />
? var mylmage=Images[ "mylmage"];<br />
? 對HTMLCollection而言,我們可以向方括號中傳入數(shù)值或字符串形式的索引值.在后臺,對數(shù)值索引就會調用item(),而對字符串索引就會調用namedltem()。要想取得文檔中的所有元素,可以向getElementsByTagName()中傳入"*".在JavaScript及CSS中,星號(*)通常表示"全部".下面看一個例子：<br />
? var allElements = document.getElementsByTagName("*");<br />
? 僅此一行代碼返回的HTMLCollection中,就包含了整個頁面中的所有元素——按照它們出現(xiàn)的先后順序.換句話說,第一項是<html>元素,第二項是<head>元素,以此類推.由于IE將注釋<br />
(Comment)實現(xiàn)為元素(Element),因此在IE中調用getElementsByTagName("*")將會返回所有注釋節(jié)點.雖然標準規(guī)定標簽名需要區(qū)分大小寫,但為了最大限度地與既有HTML頁面兼容,傳給getElementsByTagName()的標簽名是不需要區(qū)分大小寫的.但對于XML頁面而言(包括XHTML),getElementsByTagName()方法就會區(qū)分大小寫.第三個方法,也是只有HTMLDocument類型才有的方法,是getElementsByName().顧名思義,這個方法會返回帶有給定name特性的所有元素.最常使用getElementsByName()方法的情況是取得單選按鈕;為了確保發(fā)送給瀏覽器的值正確無誤,所有單選按鈕必須具有相同的name特性,如下面的例子所示：<br />
? <fieldset><br />
? ? <legend>which color do you prefer?</legend><br />
? ? <ul><br />
? ? ? <li><input type="radio"value="red"name="color"id=“colorRed"><br />
? ? ? ? <label for="colorRed">Red</label></ li><br />
? ? ? <li><input type="radio"value="green"name="color"id="colorGreen"><br />
? ? ? ? <label for="colorGreen“>Green</label></li><br />
? ? ? <li><input type="radio"value=“blue“name="color"id="colorBlue"><br />
? ? ? ? <label for="colorBlue">Blue</label×/ li><br />
? ? </ul><br />
? </fieldset><br />
? 如這個例子所示,其中所有單選按鈕的name特性值都是"color",但它們的ID可以不同.ID的作用在于將<label>元素應用到每個單選按鈕,而name特性則用以確保三個值中只有一個被發(fā)送給瀏覽器.這樣,我們就可以使用如下代碼取得所有單選按鈕：<br />
? var radios=document.getElementsByName("color");<br />
? 與getElementsByTagName()類似,getElementsByName()方法也會返回一個HTMLCollectioin,但是,對于這里的單選按鈕來說,namedltem()方法則只會取得第一項(因為每一項的name特性都相同).<br />
? ?本文僅限內部技術人員查閱學習交流,不得作于其他商業(yè)用途.原創(chuàng)文章出自:南昌網(wǎng)站建設公司-百恒網(wǎng)絡 <a href="http://m.iotmicrosoft.com" target="_blank">http://m.iotmicrosoft.com</a> 此文禁止轉載,謝謝合作!
</p>     </div>
    </div>
    
    <div   id="2qtldce"   class="article-pager">
      <ul>
       <li id="fmvjd28"    class="article-top"><a href="http://m.iotmicrosoft.com/article/1757.html"><span id="lgzigjl"    class="icon icon-menu-left"></span> 上一篇</a></li>
       <li id="u3nb7l3"    class="article-back"><a href="http://m.iotmicrosoft.com/knowledge/index.html"><span id="8t7jld7"    class="icon icon-list"></span> 返回列表</a></li>
       <li id="cesr8km"    class="article-next"><a href="http://m.iotmicrosoft.com/article/1755.html">下一篇 <span id="8d7ztbz"    class="icon icon-menu-right"></span></a></li>
      </ul>
    </div>
    
    
    <div   id="bhfuxqr"   class="i-showpicture">
      <div   id="tz88qz7"   class="i-showpic-arrowleft"></div>
      <div   id="cn7rj2h"   class="i-showpic-picbox">
       <div   id="zftmft8"   class="i-showpic-div"></div>
      </div>
      <div   id="nymqt7u"   class="i-showpic-arrowright"></div>
      <div   id="m8bjc23"   class="i-showpic-close animated"></div>
      <input type="hidden" value="0" id="pic-index">
    </div>
    
    
    <script type="text/javascript">

$(".article-content img").addClass("img-thumbnail");
     $("body").on("click",".article-content img",function(e){
        var cksub = 0;
        var $file = $(this).attr("src");
        $(".i-showpic-pic").remove();
        $("#pic-index").val(0);
        var w      = $(window).width();
        $(".i-showpic-picbox").css({"width":w+"px",'height':$(window).height()+'px'});
        cmask(); 
        var picObj = $(".article-content img");
        if(picObj.length > 0) {
          $(".i-showpic-div").css({"width":w*picObj.length+"px",'height':$(window).height()+'px','left':0});
          for(var i=0;i<picObj.length;i++) {
            if ($file == picObj.eq(i).attr('src')) cksub = i;
            $(".i-showpic-div").append('<div   id="333js7d"   class="i-showpic-pic" style="width:'+w+'px;height:'+$(window).height()+'px;"><img src="'+picObj.eq(i).attr('src')+'" /></div>');
          }
          setTimeout(function(){
            for(var j=0;j<picObj.length;j++) {
               var imgs  = picObj.eq(j).attr('src');
               var image = new Image();
               image.src = imgs;
               var pic_h = image.height;
               var pic_w = image.width;
               var h     = parseInt($(window).height()); 
               itop = 0;
               if( pic_h >= h ) {
                 pic_w = ((h-50)/pic_h)*pic_w;
                 pic_h = h-50; //高度
               }
               itop = parseInt(parseInt(h-pic_h)/2);
               $(".i-showpic-pic").eq(j).find("img").css({"margin-top":itop+"px","width":pic_w+'px',"height":pic_h+'px','display':'block'});
               if (cksub == j) { //選擇的圖片
                 $(".i-showpic-div").animate({"left":(0-w*(j))+"px"}); 
                 $("#pic-index").val(j);
               }
            }
          },400);
        }
        $(".i-showpic-arrowleft,.i-showpic-arrowright").show();
        $(".i-showpicture").show();
     });
     //左右切換
      $(".i-showpic-arrowright").click(function(e) {
        var w = $(window).width();
        var i = parseInt($("#pic-index").val())+1;
        var l = $(".i-showpic-div .i-showpic-pic").length;
        if(i < l){      
          $(".i-showpic-div").animate({"left":(0-w*(i))+"px"}); 
          $("#pic-index").val(i);
        }
        if (i==l){
          $(".i-showpic-div").animate({"left":"0px"}); 
          $("#pic-index").val(0);
        }
      });
      $(".i-showpic-arrowleft").click(function(e) {
        var w = $(window).width();
        var i = parseInt($("#pic-index").val())-1;
        if(i >= 0){      
          $(".i-showpic-div").animate({"left":(0-w*(i))+"px"}); 
          $("#pic-index").val(i);
        }
        if ( $("#pic-index").val() == 0) {
          if($(".i-showpic-pic").length>2) {
            $(".i-showpic-div").animate({"left":(0-w*($(".i-showpic-pic").length-1))+"px"},500,function(){}); 
            $("#pic-index").val($(".i-showpic-pic").length-1);
          } else if ($(".i-showpic-pic").length == 2 && (i+1) == 0){
            $(".i-showpic-div").animate({"left":(0-w)+"px"},500,function(){}); 
            $("#pic-index").val(1);
          }
        }
      });
      //關閉大圖顯示器
      $(document).on('click',function(e){
        var target = $(e.target);
        if( target.closest(".i-showpic-picbox").length == 1 || target.closest(".i-showpic-arrowleft").length == 1 || target.closest(".i-showpic-arrowright").length == 1 || target.closest(".i-showpic").length == 1 || target.closest(".i-zoompic").length == 1 || target.closest(".article-content img").length == 1){
          return false;
        }
        $(".cscreen").remove("*");
        $(".i-showpicture").hide(300);
      }); 
      
      $(".i-showpic-close").hover(function(e) {
        $(this).addClass('rotateIn'); 
      },function(e){
        $(this).removeClass('rotateIn'); 
      });

</script>

<div   id="o8ct3uy"   class="bh-footer" style="position: relative;">
  <div style="width:153px; height:153px; position:absolute; top:35px; left:50px;" id="biu"></div>
  <div   id="zfdmqtw"   class="footer-main">
    <div   id="xnl7pcf"   class="bh-smenu"> 
     <a href="http://m.iotmicrosoft.com/index.html">首頁</a>
     <a href="http://m.iotmicrosoft.com/website/index.html">網(wǎng)站建設</a>
     <a href="http://m.iotmicrosoft.com/apps/index.html">APP開發(fā)</a>
     <a href="http://m.iotmicrosoft.com/promotion/index.html">全網(wǎng)營銷</a>
     <a href="http://m.iotmicrosoft.com/software/index.html">軟件開發(fā)</a> 
     <a href="http://m.iotmicrosoft.com/case/index.html">經(jīng)典案例</a> 
     <a href="http://m.iotmicrosoft.com/knowledge/index.html">網(wǎng)站知識</a> 
     <a href="http://m.iotmicrosoft.com/about/index.html">關于我們</a>
     <a href="http://m.iotmicrosoft.com/contact/index.html">聯(lián)系我們</a> 
     <a  target="_blank" rel="nofollow">域名注冊</a> 
     <a  target="_blank" rel="nofollow">云服務器</a> 
     <a  target="_blank" rel="nofollow">虛擬主機</a> 
    </div>
    <div   id="bn2us3j"   class="bh-copyright"> Copyright @ 2006-2025 http://m.iotmicrosoft.com Inc. All Rights resreved. 
    <a target="_blank"  rel="nofollow"><img src="/public/home/images/icon/copyicon.png" style="position:relative; top:0px;" alt="贛公網(wǎng)安備案" title="贛公網(wǎng)安備案"> 贛公網(wǎng)安備 36011102000373號</a>
    <a  target="_blank" rel="nofollow">[贛ICP備17008688號-5]</a> <a href="/sitemap.xml" target="_blank" class="sitemap">網(wǎng)站地圖</a> 
        <span id="xd8veng"    class="hide"><script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
   document.write(unescape("%3Cscript src='" + _bdhmProtocol + "#/h.js%3F290578c838837356a5dcbcbb971d7399' type='text/javascript'%3E%3C/script%3E"));
   </script></span>
       <a href="http://#baidu.com/web/welcome/ico?s=290578c838837356a5dcbcbb971d7399" rel="nofollow" target="_blank"> <span id="cncljmy"    class="icon icon-stats"></span> 百度統(tǒng)計</a>
       <a  rel="nofollow" target="_blank"><img src="/public/home/images/icon/css.png" style="position: relative; top: 0px;" height="21" alt="南昌百恒網(wǎng)絡公司通過W3C檢驗標準!" title="南昌百恒網(wǎng)絡公司通過W3C標準驗證!" /></a>
    </div>
    
    <div   id="78ouky7"   class="bh-copyright">我們專注于<a href="http://m.iotmicrosoft.com/website/index.html" target="_blank">南昌網(wǎng)站建設</a>，<a href="http://m.iotmicrosoft.com/apps/index.html">南昌APP開發(fā)</a>，<a href="http://m.iotmicrosoft.com/xcx/index.html" target="_blank">南昌小程序開發(fā)</a>，等一站式互聯(lián)網(wǎng)開發(fā)服務；<a href="http://m.iotmicrosoft.com">南昌做網(wǎng)站</a>，<a href="http://m.iotmicrosoft.com" target="_blank">南昌網(wǎng)絡公司</a>就找<a href="http://m.iotmicrosoft.com/about/index.html" target="_blank">百恒網(wǎng)絡</a>
    </div>
    
    <div   id="ali3n3k"   class="bh-shareicon">
      <a href="" target="_blank"><div   id="lw32s8f"   class="bh-sina" title="新浪微博"></div></a>
      <div   id="mxkt23k"   class="bh-phone">
       <div   id="mxqz75x"   class="bh-a-b"></div>
       <div   id="lw8slem"   class="bh-phonehide">400-680-9298,0791-88117053</div>
      </div>
      <div   id="vbfjqdm"   class="bh-weixin" title="掃一掃關注百恒網(wǎng)絡微信公眾號">
       <div   id="hnbj2xw"   class="bh-hideweixin"><img src="http://m.iotmicrosoft.com/uploads/images/20211210/61b2c8180ee48.png" width="130" alt="掃一掃關注百恒網(wǎng)絡微信公眾號"></div>
      </div>
      <div   id="fbtr29d"   class="bh-xiaochengxu" title="掃一掃打開百恒網(wǎng)絡小程序">
       <div   id="tzsalfe"   class="bh-hidexiaochengxu"><img src="/public/home/images/weixin/bh-code.jpg" width="130" alt="掃一掃打開百恒網(wǎng)絡小程序"></div>
      </div>
    </div>
  </div>
 </div>

<div   id="mnbkywz"   class="bh-qiao">
  <h2><span><font class="icon icon-comment"></font> 歡迎您的光顧，我們將竭誠為您服務</span><b>×</b></h2>
  <div   id="xen39nv"   class="qiao-main">
    <iframe name="qiao" id="qiaoview" scrolling="no" frameborder="0" width="100%" height="100%" src="/home/cases/bhloading.html"></iframe>
  </div>
</div>

<canvas class="bh-christmas-snow" id="bh-christmas-snow" style="position:absolute; top:130px;z-index:999;"></canvas>
<script type="text/javascript" src="/public/home/js/common.js?v=3.1.1"></script>
<script type="text/javascript" src="/public/home/js/christmas/christmas.js?v=1.2.1"></script>
<script type="text/javascript" src="/public/home/js/lottie.min.js"></script>
<script>
 //$.fn.snow();
</script>
<script>
lottie.loadAnimation({container:document.getElementById('lantern-year-left'),renderer : 'svg',loop : true,autoplay : true,path: '/public/home/images/lantern.json'});
lottie.loadAnimation({container:document.getElementById('lantern-year-right'),renderer : 'svg',loop : true,autoplay : true,path: '/public/home/images/lantern.json'});
lottie.loadAnimation({container:document.getElementById('biu'),renderer : 'svg',loop : true,autoplay : true,path: '/public/home/images/biu.json'});
</script>
<script>
    $.post('http://m.iotmicrosoft.com/online/index.html', {}, function (res) {}, 'json');
</script>

</div>
</div>

</footer>

最近中文字幕大全|熟女少妇精品一区二区|国产网红主播精品一区|日本一区二区精品理论电影|欧洲少妇无码精品视频在线|久久国产精品永久免费网站|人妻无码久久一区二区免费麻豆|国产日韩欧美一区二区在线高清

結合實例詳細介紹getElementByld()、getElementsByTagName()及namedItem()使用方法