结合实例详细介绍getElementByld()、getElementsByTagName()及namedItem()使用方法

说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了.取得元素的操作可以使用document对象的几个方法来完成.其中,Document类型为此提供了两个方法：getElementById()和getElementsByTagName(). 第一个方法,getElementByld(),接受一个参数：要取得的元素的ID.如果找到相应的元素则回该元素,如果不存在带有相应ID的元素,则返回null.注意,这里的ID必须与页面中元素的id特性(attribute)严格匹配,包括大小写.以下面的元素为例：

Some text

可以使用下面的代码取得这个元素：
var div=document.getElementByld("myDiv"); //取得

元素的引用
但是,下面的代码在除IE之外的所有浏览器中都将返回null:
var div=document.getElementByld("mydiv"); //无效的ID(在IE中可以)
如果页面中多个元素的ID值相同,getElementByld()只返回文档中第一次出现的元素.IE7及
较低版本还为此方法添加了一个有意思的“怪癖"：name特性与给定ID匹配的表单元素(、

.<button>及<select>)也会被该方法返回.如果有哪个表单元素的name特性等于指定的ID.而且该元素在文档中位于带有给定ID的元素前面,那么IE就会返回那个表单元素.来看下面的例子：<br />
   <input type="text"name="myElement" value="Text field"><br />
   <div id="myElement">A div</dIV><br />
   基于这段HTML代码,在IE7中调用document.getElementByld("myElement"),结果会返回<input>元素;而在其他所有浏览器中,都会返回对<div>元素的引用.为了避免IE中存在的这个问 题,最好的办法是不让表单字段的name特性与其他元素的ID相同.   另一个常用于取得元素引用的方法是getElementsByTagName().这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的NodeList.在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个“动态"集合,该对象与NodeList非常类似.例如,下列代码会取得页面中所有的<img>元素,并返回一个HTMLCollection：<br />
   var images=document.getElementsByTagName("img");<br />
   这行代码会将一个HTMLCollec tion对象保存在1mages变量中.与NodeList对象类似,可以使用方括号语法或item()方法来访问HTMLCollection对象中的项.而这个对象中元素的数量则可<br />
  以通过其length属性取得,如下面的例子所示：<br />
   alert(images.length); //输出图像的数量<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而言,我们可以向方括号中传入数值或字符串形式的索引值.在后台,对数值索引就会调用item(),而对字符串索引就会调用namedltem()。要想取得文档中的所有元素,可以向getElementsByTagName()中传入"*".在JavaScript及CSS中,星号(*)通常表示"全部".下面看一个例子：<br />
  var allElements = document.getElementsByTagName("*");<br />
  仅此一行代码返回的HTMLCollection中,就包含了整个页面中的所有元素——按照它们出现的先后顺序.换句话说,第一项是<html>元素,第二项是<head>元素,以此类推.由于IE将注释<br />
(Comment)实现为元素(Element),因此在IE中调用getElementsByTagName("*")将会返回所有注释节点.虽然标准规定标签名需要区分大小写,但为了最大限度地与既有HTML页面兼容,传给getElementsByTagName()的标签名是不需要区分大小写的.但对于XML页面而言(包括XHTML),getElementsByTagName()方法就会区分大小写.第三个方法,也是只有HTMLDocument类型才有的方法,是getElementsByName().顾名思义,这个方法会返回带有给定name特性的所有元素.最常使用getElementsByName()方法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的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特性则用以确保三个值中只有一个被发送给浏览器.这样,我们就可以使用如下代码取得所有单选按钮：<br />
  var radios=document.getElementsByName("color");<br />
  与getElementsByTagName()类似,getElementsByName()方法也会返回一个HTMLCollectioin,但是,对于这里的单选按钮来说,namedltem()方法则只会取得第一项(因为每一项的name特性都相同).<br />
   本文仅限内部技术人员查阅学习交流,不得作于其他商业用途.原创文章出自:南昌网站建设公司-百恒网络 <a href="http://www.jxbh.cn" target="_blank">http://www.jxbh.cn</a> 此文禁止转载,谢谢合作!
</p>     </div>
    </div>
    
    <div class="article-pager">
      <ul>
       <li class="article-top"><a href="https://www.jxbh.cn/article/1757.html"><span class="icon icon-menu-left"></span> 上一篇</a></li>
       <li class="article-back"><a href="https://www.jxbh.cn/knowledge/index.html"><span class="icon icon-list"></span> 返回列表</a></li>
       <li class="article-next"><a href="https://www.jxbh.cn/article/1755.html">下一篇 <span class="icon icon-menu-right"></span></a></li>
      </ul>
    </div>
    
    
    <div class="i-showpicture">
      <div class="i-showpic-arrowleft"></div>
      <div class="i-showpic-picbox">
       <div class="i-showpic-div"></div>
      </div>
      <div class="i-showpic-arrowright"></div>
      <div 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 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 class="bh-footer">
 <div class="footer-main">
   <div class="bh-smenu"> 
    <a href="https://www.jxbh.cn/index.html">首页</a>
    <a href="https://www.jxbh.cn/website/index.html">网站建设</a>
    <a href="https://www.jxbh.cn/apps/index.html">APP开发</a>
    <a href="https://www.jxbh.cn/promotion/index.html">全网营销</a>
    <a href="https://www.jxbh.cn/software/index.html">软件开发</a> 
    <a href="https://www.jxbh.cn/case/index.html">经典案例</a> 
    <a href="https://www.jxbh.cn/knowledge/index.html">网站知识</a> 
    <a href="https://www.jxbh.cn/about/index.html">关于我们</a>
    <a href="https://www.jxbh.cn/contact/index.html">联系我们</a> 
    <a href="http://www.jxid.cn/services/domain/" target="_blank" rel="nofollow">域名注册</a> 
    <a href="http://www.jxid.cn/services/cloudhost/" target="_blank" rel="nofollow">云服务器</a> 
    <a href="http://www.jxid.cn/services/webhosting/" target="_blank" rel="nofollow">虚拟主机</a> 
   </div>
   <div class="bh-copyright"> Copyright @ 2006-2024 https://www.jxbh.cn Inc. All Rights resreved. 
   <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010902000406" rel="nofollow"><img src="/public/home/images/icon/copyicon.png" style="position:relative; top:0px;" alt="赣公网安备案" title="赣公网安备案"> 赣公网安备36010902000406号</a>
   <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">[赣ICP备17008688号-5]</a> <a href="/sitemap.xml" target="_blank" class="sitemap">网站地图</a> 
       <span class="hide"><script type="text/javascript">
 	var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
	document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F290578c838837356a5dcbcbb971d7399' type='text/javascript'%3E%3C/script%3E"));
	</script></span>
      <a href="http://tongji.baidu.com/web/welcome/ico?s=290578c838837356a5dcbcbb971d7399" rel="nofollow" target="_blank"> <span class="icon icon-stats"></span> 百度统计</a>
      <a href="http://jigsaw.w3.org/css-validator/validator?lang=zh-cn&profile=css3svg&uri=https%3A%2F%2Fwww.jxbh.cn%2Fpublic%2Fhome%2Fcss%2Fcommon.css&usermedium=all&vextwarning=&warning=1" rel="nofollow" target="_blank"><img src="/public/home/images/icon/css.png" style="position: relative; top: 0px;" height="21" alt="南昌百恒网络公司通过W3C检验标准!" title="南昌百恒网络公司通过W3C标准验证!" /></a>
   </div>
   
   <div class="bh-copyright">我们专注于<a href="https://www.jxbh.cn/website/index.html" target="_blank">南昌网站建设</a>，<a href="https://www.jxbh.cn/apps/index.html">南昌APP开发</a>，<a href="https://www.jxbh.cn/xcx/index.html" target="_blank">南昌小程序开发</a>，等一站式互联网开发服务；<a href="https://www.jxbh.cn">南昌做网站</a>，<a href="https://www.jxbh.cn" target="_blank">南昌网络公司</a>就找<a href="https://www.jxbh.cn/about/index.html" target="_blank">百恒网络</a>
   </div>
   
   <div class="bh-shareicon">
     <a href="" target="_blank"><div class="bh-sina" title="新浪微博"></div></a>
     <div class="bh-phone">
      <div class="bh-a-b"></div>
      <div class="bh-phonehide">400-680-9298,0791-88117053</div>
     </div>
     <div class="bh-weixin" title="扫一扫关注百恒网络微信公众号">
      <div class="bh-hideweixin"><img src="https://www.jxbh.cn/uploads/images/20211210/61b2c8180ee48.png" width="130" alt="扫一扫关注百恒网络微信公众号"></div>
     </div>
     <div class="bh-xiaochengxu" title="扫一扫打开百恒网络小程序">
      <div class="bh-hidexiaochengxu"><img src="/public/home/images/weixin/bh-code.jpg" width="130" alt="扫一扫打开百恒网络小程序"></div>
     </div>
   </div>
 </div>
</div>

<div class="bh-qiao">
  <h2><span><font class="icon icon-comment"></font> 欢迎您的光顾，我们将竭诚为您服务</span><b>×</b></h2>
  <div class="qiao-main">
    <iframe name="qiao" id="qiaoview" scrolling="no" frameborder="0" width="100%" height="100%" src="/home/cases/bhloading.html"></iframe>
  </div>
</div>