结合实例详细介绍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" style="margin-top:10px;">
   <ul>
    <li class="article-top"><a href="https://m.jxbh.cn/article/1757.html"><span class="icon icon-menu-left"></span> 上一篇</a></li>
    <li class="article-back"><a href="https://m.jxbh.cn/knowledge/index.html"><span class="icon icon-list"></span> 返回列表</a></li>
    <li class="article-next"><a href="https://m.jxbh.cn/article/1755.html">下一篇 <span class="icon icon-menu-right"></span></a></li>
   </ul>
 </div>
 
 
 <div class="bh-share"><span>展开分享</span></div>
 <div class="article-share animated">
    <a href="http://widget.renren.com/dialog/share?resourceUrl=https://m.jxbh.cn/article/1756.html&utm_medium=renren&title=结合实例详细介绍getElementByld()、getElementsByTagName()及namedItem()使用方法&pic=https://www.jxbh.cn/uploads/images/20161104/581bdf52eb88e.jpg&srcUrl=https://m.jxbh.cn/article/1756.html" target="_blank" title="分享到人人网">
     <div class="share-icon s-rr"><img src="/public/home/images/icon/renren.png" title="分享到人人网" alt="分享到人人网"></div>
    </a>
    <a href="https://www.douban.com/share/service?name=结合实例详细介绍getElementByld()、getElementsByTagName()及namedItem()使用方法&href=https://m.jxbh.cn/article/1756.html?utm_source=js-share&utm_medium=douban&image=https://www.jxbh.cn/uploads/images/20161104/581bdf52eb88e.jpg&updated=&bm=&url=https://m.jxbh.cn/article/1756.html?utm_source=js-share&utm_medium=douban&title=结合实例详细介绍getElementByld()、getElementsByTagName()及namedItem()使用方法&image=https://www.jxbh.cn/uploads/images/20161104/581bdf52eb88e.jpg&comment=说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了.取得元素的操作可以使用document对象的几个方法来完成." target="_blank" title="分享到豆瓣网">
     <div class="share-icon s-dou"><img src="/public/home/images/icon/dou.png" title="分享到豆瓣网"  alt="分享到豆瓣网"></div>
    </a>
    <a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://m.jxbh.cn/article/1756.html&title=&desc=说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了.取得元素的操作可以使用document对象的几个方法来完成.&summary=说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了.取得元素的操作可以使用document对象的几个方法来完成.https://m.jxbh.cn/article/1756.html&site=UiiiUiii&pics=https://www.jxbh.cn/uploads/images/20161104/581bdf52eb88e.jpg" target="_blank" title="分享到QQ空间">
     <div class="share-icon s-qq"><img src="/public/home/images/icon/qqzone.png" title="分享到QQ空间"  alt="分享到QQ空间"></div>
    </a>
    <a href="javascript:void(0)" title="分享到腾讯微博">
     <div class="share-icon s-tx"><img src="/public/home/images/icon/qqweibo.png" title="分享到腾讯微博"  alt="分享到腾讯微博"></div>
    </a>
    <a href="http://service.weibo.com/share/share.php?appkey=&uurl=https://m.jxbh.cn/article/1756.html&title=说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了.取得元素的操作可以使用document对象的几个方法来完成.@南昌百恒网络 原文学习戳→&content=utf-8&pic=https://www.jxbh.cn/uploads/images/20161104/581bdf52eb88e.jpg" target="_blank" title="分享到新浪微博">
     <div class="share-icon s-wb"><img src="/public/home/images/icon/weibo.png" title="分享到新浪微博"  alt="分享到新浪微博"></div>
    </a>
    <a href="http://connect.qq.com/widget/shareqq/index.html?url=https://m.jxbh.cn/article/1756.html&title=结合实例详细介绍getElementByld()、getElementsByTagName()及namedItem()使用方法https://m.jxbh.cn/article/1756.html&summary=说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了.取得元素的操作可以使用document对象的几个方法来完成.&site=baidu&pics=https://www.jxbh.cn/uploads/images/20161104/581bdf52eb88e.jpgic}" target="_blank" title="分享到微信">
     <div class="share-icon s-wx"><img src="/public/home/images/icon/qq.png" title="分享到QQ好友"  alt="分享到QQ好友"></div>
    </a>
 </div>
 <script type="text/javascript" src="/public/home/js/previewImage.min.js"></script>
 
 <script type="text/javascript">
   $(".bh-share").click(function(e) {
     var $this = $(this);
	 if ($(".article-share").is(":hidden")) {
       $this.find("span").text('关闭分享');
	   $(".article-share").show().animate({"bottom":"65px"},400,function(e){
	     $(".article-share").addClass("bounce");
	   });
	 } else {
	   $this.find("span").text('展开分享');
	   $(".article-share").animate({"bottom":"-65px"},400,function(e){
	     $(".article-share").hide();
	   });
	 }
   });
   
   $(".article-content img").addClass("img-thumbnail");
   
   $(document).ready(function(e) {
      
	  $('.article-content img').click(function(e) {
		 var urls = [];
		 $('.article-content img').each(function(index, element) {
			urls[index] = $('.article-content img').eq(index).attr('src');   
		 });
		 var img = $(this).attr('src');
		 var imglist = {urls:urls,current:img};
		 previewImage.start(imglist);   
      });
	  
	  $(".article-content a").click(function(e) {
          window.location.href = $(this).attr("href");  
      });
	   
   });
   
 </script>

<div class="bh-fmenu">
   <a href="/home/index/service.html"><div class="bh-fdiv">
    <div class="bh-fimg"><img src="/public/home/images/mobile/website.png" width="20"></div>
    <div class="bh-ffont">服务</div>
   </div></a>
   <a href="https://m.jxbh.cn/case/index.html"><div class="bh-fdiv">
    <div class="bh-fimg"><img src="/public/home/images/mobile/case.png" width="18"></div>
    <div class="bh-ffont">案例</div>
   </div></a>
   <a href="https://m.jxbh.cn/index.html"><div class="bh-fmore">
     <div class="bh-mymore"></div>
     <div class="bh-myfont"></div>
   </div></a>
   <a href="https://m.jxbh.cn/info/index.html"><div class="bh-fdiv">
    <div class="bh-fimg"><img src="/public/home/images/mobile/new.png" width="20"></div>
    <div class="bh-ffont">动态</div>
   </div></a>
   <a href="https://m.jxbh.cn/contact/index.html"><div class="bh-fdiv">
    <div class="bh-fimg"><img src="/public/home/images/mobile/contact.png" width="16"></div>
    <div class="bh-ffont">联系</div>
   </div></a>
 </div>
 
 
 <a href='tel:4006809298'><div class="tel-icon"><span class="icon icon-comment"></span><div class="tel-num">咨询</div></div></a>
 
 <script type="text/javascript">
  $(".bh-fmenu").animate({"bottom":"0"},500,function(){});
  $.post('https://m.jxbh.cn/online/index.html', {'online':1},function(data){},'json');
  $(".bh-fixtop").click(function(e) {
    $("html,body,php").animate({scrollTop: 0}, 400);  
  });
  console.log('Welcome to http://www.jxbh.cn');
 </script>
 
</body>
</html>