十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

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

百恒网络 2016-11-04 2565

说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了.取得元素的操作可以使用document对象的几个方法来完成.其中,Document类型为此提供了 两个方法:getElementById()和getElementsByTagName().  第一个方法,getElementByld(),接受一个参数:要取得的元素的ID.如果找到相应的元素则回该元素,如果不存在带有相应ID的元素,则返回null.注意,这里的ID必须与页面中元素的id特性(attribute)严格匹配,包括大小写.以下面的元素为例:
   <div id="myDiv">Some text</div>
   可以使用下面的代码取得这个元素:
   var div=document.getElementByld("myDiv"); //取得<div>元素的引用
   但是,下面的代码在除IE之外的所有浏览器中都将返回null:
   var div=document.getElementByld("mydiv"); //无效的ID(在IE中可以)
  如果页面中多个元素的ID值相同,getElementByld()只返回文档中第一次出现的元素.IE7及
较低版本还为此方法添加了一个有意思的“怪癖":name特性与给定ID匹配的表单元素(<input>、 <textarea>.<button>及<select>)也会被该方法返回.如果有哪个表单元素的name特性等于指定的ID.而且该元素在文档中位于带有给定ID的元素前面,那么IE就会返回那个表单元素.来看下面的例子:
   <input type="text"name="myElement" value="Text field">
   <div id="myElement">A div</dIV>
   基于这段HTML代码,在IE7中调用document.getElementByld("myElement"),结果会返回<input>元素;而在其他所有浏览器中,都会返回对<div>元素的引用.为了避免IE中存在的这个问 题,最好的办法是不让表单字段的name特性与其他元素的ID相同.   另一个常用于取得元素引用的方法是getElementsByTagName().这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的NodeList.在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个“动态"集合,该对象与NodeList非常类似.例如,下列代码会取得页面中所有的<img>元素,并返回一个HTMLCollection:
   var images=document.getElementsByTagName("img");
   这行代码会将一个HTMLCollec tion对象保存在1mages变量中.与NodeList对象类似,可以使用方括号语法或item()方法来访问HTMLCollection对象中的项.而这个对象中元素的数量则可
  以通过其length属性取得,如下面的例子所示:
   alert(images.length); //输出图像的数量
   alert( images[0].src); //输出第一个图像元素的src特性
   alert( images.item(o).src); //输出第一个图像元素的src特性
   HTMLCollection对象还有一个方法,叫做namedItem().使用这个方法可以通过元素的name特性取得集合中的项.例如,假设上面提到的页面中包含如下<img>元素:
   <img src="myimage.gif" name="myImage">
  那么就可以通过如下方式从Images变量中取得这个<img>元素:
  var mylmage=images.namedltem("mylmage");
  在提供按索引访问项的基础上,HTMLCollection还支持按名称访问项,这就为我们取得实际想要的元素提供了便利.而且,对命名的项也可以使用方括号语法来访问,如下所示:
  var mylmage=Images[ "mylmage"];
  对HTMLCollection而言,我们可以向方括号中传入数值或字符串形式的索引值.在后台,对数值索引就会调用item(),而对字符串索引就会调用namedltem()。要想取得文档中的所有元素,可以向getElementsByTagName()中传入"*".在JavaScript及CSS中,星号(*)通常表示"全部".下面看一个例子:
  var allElements = document.getElementsByTagName("*");
  仅此一行代码返回的HTMLCollection中,就包含了整个页面中的所有元素——按照它们出现的先后顺序.换句话说,第一项是<html>元素,第二项是<head>元素,以此类推.由于IE将注释
(Comment)实现为元素(Element),因此在IE中调用getElementsByTagName("*")将会返回所有注释节点.虽然标准规定标签名需要区分大小写,但为了最大限度地与既有HTML页面兼容,传给getElementsByTagName()的标签名是不需要区分大小写的.但对于XML页面而言(包括XHTML),getElementsByTagName()方法就会区分大小写.第三个方法,也是只有HTMLDocument类型才有的方法,是getElementsByName().顾名思义,这个方法会返回带有给定name特性的所有元素.最常使用getElementsByName()方法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的name特性,如下面的例子所示:
  <fieldset>
    <legend>which color do you prefer?</legend>
    <ul>
      <li><input type="radio"value="red"name="color"id=“colorRed">
        <label for="colorRed">Red</label></ li>
      <li><input type="radio"value="green"name="color"id="colorGreen">
        <label for="colorGreen“>Green</label></li>
      <li><input type="radio"value=“blue“name="color"id="colorBlue">
        <label for="colorBlue">Blue</label×/ li>
    </ul>
  </fieldset>
  如这个例子所示,其中所有单选按钮的name特性值都是"color",但它们的ID可以不同.ID的作用在于将<label>元素应用到每个单选按钮,而name特性则用以确保三个值中只有一个被发送给浏览器.这样,我们就可以使用如下代码取得所有单选按钮:
  var radios=document.getElementsByName("color");
  与getElementsByTagName()类似,getElementsByName()方法也会返回一个HTMLCollectioin,但是,对于这里的单选按钮来说,namedltem()方法则只会取得第一项(因为每一项的name特性都相同).
   本文仅限内部技术人员查阅学习交流,不得作于其他商业用途.原创文章出自:南昌网站建设公司-百恒网络 http://www.jxbh.cn 此文禁止转载,谢谢合作!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×