联系站长 加入收藏 设为首页 繁體中文 RSS
  首页 | 生活百科 | 电脑网络 | 高手学堂 | 语录名言 | 读书文学 | 极品软件 | 奇趣图片 | 站长微博  
 您的位置: 精品百字节网 >> 电脑网络 >> 网络编程 >> 编程问题 >> 正文 当前没有通告!
   □  javascript通过className获取元素    3星级
javascript通过className获取元素
[ 作者:Admin     来源:精品百字节网     点击数:     更新时间:2008-09-15     文章录入:Admin
【字体:
[内容提要]
在 JavaScript 内建的核心中,document 物件及 Element 物件总共可以透过三个方式来获取其下的元素,分别是: getElementById('id') getElementsByName('name') getElementsByTagName('tag')

在 JavaScript 内建的核心中,document 物件及 Element 物件总共可以透过三个方式来获取其下的元素,分别是:

getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')

这些方法就跟它们的名字一样,分别是依照 id, name, tag 来获取元素。
因在同一份文件中,id 是具有唯一性的,所以 getElementById(id) 的回传值是单一物件可以直接使用;而其他则会传回一个依照具有该属性的元素在文件中出现顺序排列的阵列,使用时必须指定阵列编号,如: array[0] 代表第一个元素。可是在设计网页时,最常常需要使用到的 class 却没有相对应的方法可以去获取 className 相同的元素。没有没关系,我们自己写一个,而且代码非常简短只有下面几句。function getElementsByClassName(n) {
    var el = [],
        _el = document.getElementsByTagName('*');
    for (var i=0; i<_el.length; i++ ) {
       if (_el[i].className == n ) {
           el[el.length] = _el[i];
        }
   }
   return el;
}上面这段代码将会传回一个元素阵列,这些元素的共通点就是它们的 class 名称都一样。下面这段代码是 getElementsByClassName(’className’) 众多应用的其中一种,可以将文件中所有 className 为 ‘black’ 的元素的 className 改为 ‘red’。
var classBlack = getElementsByClassName('black');
for (var i=0; i<classBlack.length; i++) {
   classBlack[i].className = 'red';
}

PS:prototype 很早就扩展过DOM的方法,添加了 getElementsByClassName,从方法名上看,似乎非常正统,与前面3种方法名称也像,分析其代码,却发现还是通过 getElementsByTagName 来实现。这个方法称不上优雅,因为需要遍历所有的元素,探测元素是否包含目标样式类名,返回符合条件的元素数组。google了一下,却没有找到更优雅高效的替代方法。

上一篇文章:http代理相关知识 下一篇文章:html中onerror的用法示例
发表评论 □告诉好友 □打印此文 □收藏此页 □关闭窗口 □返回顶部
 最新热点文章
 精品医院类网站网址大收集
 如何删除windows 2003或xp系统隐藏的...
 DedeCms管理员后台登陆经常自动退出的...
 知道IP如何用dos命令查出电脑名称
 WORD出错老是要求以安全模式打开文件...
 如何设置首页不显示页眉页脚?
 如何利用inurl命令查询网站外链及栏目...
 
 最新推荐文章
 精品医院类网站网址大收集
 如何利用宽带路由器控制局域网内电脑上...
 CSS圆角代码的实现方法
 带停顿的单行文字滚动代码
 实用的新网站免费收录提交地址精选
 Left join , Right Join, Inner Join用...
 趣话淘宝网衍生的多种新型职业
 
 最新图文
  ◇  网友评论:(只显示最新5条。评论内容只代表网友观点,与本站立场无关!)
关于本站 | 免责申明 | 网站地图 | 联系站长 | 友情链接 | 与我同在
冀ICP备06032589号【虚拟化精英群虚拟化精英群续
  Copyright© 2006-2009 100byte.Com All Rights Reserved
网站声明:本网站是公益性质网站,部分内容来源于网络,如有侵犯您权利的地方,请与精品百字节站长联系,尽快修正.
Powered By CreateLive CMS 本站法律顾问:(冀港)武镇海律师
点击这里给我发消息