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

Some text

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

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

.<button>及<select>)也會(huì)被該方法返回.如果有哪個(gè)表單元素的name特性等于指定的ID.而且該元素在文檔中位于帶有給定ID的元素前面,那么IE就會(huì)返回那個(gè)表單元素.來看下面的例子：<br />
? ?<input type="text"name="myElement" value="Text field"><br />
? ?<div   class="iaegkks"   id="myElement">A div</dIV><br />
? ?基于這段HTML代碼,在IE7中調(diào)用document.getElementByld("myElement"),結(jié)果會(huì)返回<input>元素;而在其他所有瀏覽器中,都會(huì)返回對<div>元素的引用.為了避免IE中存在的這個(gè)問 題,最好的辦法是不讓表單字段的name特性與其他元素的ID相同. ? 另一個(gè)常用于取得元素引用的方法是getElementsByTagName().這個(gè)方法接受一個(gè)參數(shù),即要取得元素的標(biāo)簽名,而返回的是包含零或多個(gè)元素的NodeList.在HTML文檔中,這個(gè)方法會(huì)返回一個(gè)HTMLCollection對象,作為一個(gè)“動(dòng)態(tài)"集合,該對象與NodeList非常類似.例如,下列代碼會(huì)取得頁面中所有的<img>元素,并返回一個(gè)HTMLCollection：<br />
? ?var images=document.getElementsByTagName("img");<br />
? ?這行代碼會(huì)將一個(gè)HTMLCollec tion對象保存在1mages變量中.與NodeList對象類似,可以使用方括號(hào)語法或item()方法來訪問HTMLCollection對象中的項(xiàng).而這個(gè)對象中元素的數(shù)量則可<br />
? 以通過其length屬性取得,如下面的例子所示：<br />
? ?alert(images.length); //輸出圖像的數(shù)量<br />
? ?alert( images[0].src); //輸出第一個(gè)圖像元素的src特性<br />
? ?alert( images.item(o).src); //輸出第一個(gè)圖像元素的src特性<br />
? ?HTMLCollection對象還有一個(gè)方法,叫做namedItem().使用這個(gè)方法可以通過元素的name特性取得集合中的項(xiàng).例如,假設(shè)上面提到的頁面中包含如下<img>元素：<br />
? ?<img src="myimage.gif" name="myImage"><br />
? 那么就可以通過如下方式從Images變量中取得這個(gè)<img>元素：<br />
? var mylmage=images.namedltem("mylmage");<br />
? 在提供按索引訪問項(xiàng)的基礎(chǔ)上,HTMLCollection還支持按名稱訪問項(xiàng),這就為我們?nèi)〉脤?shí)際想要的元素提供了便利.而且,對命名的項(xiàng)也可以使用方括號(hào)語法來訪問,如下所示：<br />
? var mylmage=Images[ "mylmage"];<br />
? 對HTMLCollection而言,我們可以向方括號(hào)中傳入數(shù)值或字符串形式的索引值.在后臺(tái),對數(shù)值索引就會(huì)調(diào)用item(),而對字符串索引就會(huì)調(diào)用namedltem()。要想取得文檔中的所有元素,可以向getElementsByTagName()中傳入"*".在JavaScript及CSS中,星號(hào)(*)通常表示"全部".下面看一個(gè)例子：<br />
? var allElements = document.getElementsByTagName("*");<br />
? 僅此一行代碼返回的HTMLCollection中,就包含了整個(gè)頁面中的所有元素——按照它們出現(xiàn)的先后順序.換句話說,第一項(xiàng)是<html>元素,第二項(xiàng)是<head>元素,以此類推.由于IE將注釋<br />
(Comment)實(shí)現(xiàn)為元素(Element),因此在IE中調(diào)用getElementsByTagName("*")將會(huì)返回所有注釋節(jié)點(diǎn).雖然標(biāo)準(zhǔn)規(guī)定標(biāo)簽名需要區(qū)分大小寫,但為了最大限度地與既有HTML頁面兼容,傳給getElementsByTagName()的標(biāo)簽名是不需要區(qū)分大小寫的.但對于XML頁面而言(包括XHTML),getElementsByTagName()方法就會(huì)區(qū)分大小寫.第三個(gè)方法,也是只有HTMLDocument類型才有的方法,是getElementsByName().顧名思義,這個(gè)方法會(huì)返回帶有給定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 />
? 如這個(gè)例子所示,其中所有單選按鈕的name特性值都是"color",但它們的ID可以不同.ID的作用在于將<label>元素應(yīng)用到每個(gè)單選按鈕,而name特性則用以確保三個(gè)值中只有一個(gè)被發(fā)送給瀏覽器.這樣,我們就可以使用如下代碼取得所有單選按鈕：<br />
? var radios=document.getElementsByName("color");<br />
? 與getElementsByTagName()類似,getElementsByName()方法也會(huì)返回一個(gè)HTMLCollectioin,但是,對于這里的單選按鈕來說,namedltem()方法則只會(huì)取得第一項(xiàng)(因?yàn)槊恳豁?xiàng)的name特性都相同).<br />
? ?本文僅限內(nèi)部技術(shù)人員查閱學(xué)習(xí)交流,不得作于其他商業(yè)用途.原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) <a href="http://www.myforexfactory.net" target="_blank">http://www.myforexfactory.net</a> 此文禁止轉(zhuǎn)載,謝謝合作!
</p>     </div>
    </div>
    
    <div   id="ewiegyo"   class="article-pager">
      <ul>
       <li id="iacqkms"    class="article-top"><a href="http://www.myforexfactory.net/article/1757.html"><span id="aswkeeu"    class="icon icon-menu-left"></span> 上一篇</a></li>
       <li id="ucqkwyo"    class="article-back"><a href="http://www.myforexfactory.net/knowledge/index.html"><span id="scomqgs"    class="icon icon-list"></span> 返回列表</a></li>
       <li id="qywyume"    class="article-next"><a href="http://www.myforexfactory.net/article/1755.html">下一篇 <span id="aauamem"    class="icon icon-menu-right"></span></a></li>
      </ul>
    </div>
    
    
    <div   id="qyuocik"   class="i-showpicture">
      <div   id="oykuiqq"   class="i-showpic-arrowleft"></div>
      <div   id="cioaecc"   class="i-showpic-picbox">
       <div   id="oqceksi"   class="i-showpic-div"></div>
      </div>
      <div   id="skwquum"   class="i-showpic-arrowright"></div>
      <div   id="wwqcqyo"   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="aamsouc"   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);
          }
        }
      });
      //關(guān)閉大圖顯示器
      $(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="yaeycew"   class="bh-footer" style="position: relative;">
  <div style="width:153px; height:153px; position:absolute; top:35px; left:50px;" id="biu"></div>
  <div   id="yaeimuc"   class="footer-main">
    <div   id="mmamqqg"   class="bh-smenu"> 
     <a href="http://www.myforexfactory.net/index.html">首頁</a>
     <a href="http://www.myforexfactory.net/website/index.html">網(wǎng)站建設(shè)</a>
     <a href="http://www.myforexfactory.net/apps/index.html">APP開發(fā)</a>
     <a href="http://www.myforexfactory.net/promotion/index.html">全網(wǎng)營銷</a>
     <a href="http://www.myforexfactory.net/software/index.html">軟件開發(fā)</a> 
     <a href="http://www.myforexfactory.net/case/index.html">經(jīng)典案例</a> 
     <a href="http://www.myforexfactory.net/knowledge/index.html">網(wǎng)站知識(shí)</a> 
     <a href="http://www.myforexfactory.net/about/index.html">關(guān)于我們</a>
     <a href="http://www.myforexfactory.net/contact/index.html">聯(lián)系我們</a> 
     <a  target="_blank" rel="nofollow">域名注冊</a> 
     <a  target="_blank" rel="nofollow">云服務(wù)器</a> 
     <a  target="_blank" rel="nofollow">虛擬主機(jī)</a> 
    </div>
    <div   id="uuycemc"   class="bh-copyright"> Copyright @ 2006-2024 http://www.myforexfactory.net 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號(hào)</a>
    <a  target="_blank" rel="nofollow">[贛ICP備17008688號(hào)-5]</a> <a href="/sitemap.xml" target="_blank" class="sitemap">網(wǎng)站地圖</a> 
        <span id="uwaeqqg"    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="qscyceu"    class="icon icon-stats"></span> 百度統(tǒng)計(jì)</a>
       <a  rel="nofollow" target="_blank"><img src="/public/home/images/icon/css.png" style="position: relative; top: 0px;" height="21" alt="南昌百恒網(wǎng)絡(luò)公司通過W3C檢驗(yàn)標(biāo)準(zhǔn)!" title="南昌百恒網(wǎng)絡(luò)公司通過W3C標(biāo)準(zhǔn)驗(yàn)證!" /></a>
    </div>
    
    <div   id="acoioeo"   class="bh-copyright">我們專注于<a href="http://www.myforexfactory.net/website/index.html" target="_blank">南昌網(wǎng)站建設(shè)</a>，<a href="http://www.myforexfactory.net/apps/index.html">南昌APP開發(fā)</a>，<a href="http://www.myforexfactory.net/xcx/index.html" target="_blank">南昌小程序開發(fā)</a>，等一站式互聯(lián)網(wǎng)開發(fā)服務(wù)；<a href="http://www.myforexfactory.net">南昌做網(wǎng)站</a>，<a href="http://www.myforexfactory.net" target="_blank">南昌網(wǎng)絡(luò)公司</a>就找<a href="http://www.myforexfactory.net/about/index.html" target="_blank">百恒網(wǎng)絡(luò)</a>
    </div>
    
    <div   id="iiwqmwo"   class="bh-shareicon">
      <a href="" target="_blank"><div   id="ookosss"   class="bh-sina" title="新浪微博"></div></a>
      <div   id="qimquwu"   class="bh-phone">
       <div   id="uoqeqsi"   class="bh-a-b"></div>
       <div   id="ygkoksa"   class="bh-phonehide">400-680-9298,0791-88117053</div>
      </div>
      <div   id="wqsmssa"   class="bh-weixin" title="掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)">
       <div   id="mwiwiiq"   class="bh-hideweixin"><img src="http://www.myforexfactory.net/uploads/images/20211210/61b2c8180ee48.png" width="130" alt="掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)"></div>
      </div>
      <div   id="gwauqyq"   class="bh-xiaochengxu" title="掃一掃打開百恒網(wǎng)絡(luò)小程序">
       <div   id="ookokus"   class="bh-hidexiaochengxu"><img src="/public/home/images/weixin/bh-code.jpg" width="130" alt="掃一掃打開百恒網(wǎng)絡(luò)小程序"></div>
      </div>
    </div>
  </div>
 </div>

<div   id="mesmqas"   class="bh-qiao">
  <h2><span><font class="icon icon-comment"></font> 歡迎您的光顧，我們將竭誠為您服務(wù)</span><b>×</b></h2>
  <div   id="uoieaaa"   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://www.myforexfactory.net/online/index.html', {}, function (res) {}, 'json');
</script>

</div>
</div>

</table>
</footer>

結(jié)合實(shí)例詳細(xì)介紹getElementByld()、getElementsByTagName()及namedItem()使用方法

結(jié)合實(shí)例詳細(xì)介紹getElementByld()、getElementsByTagName()及namedItem()使用方法