javascript通过className获取文件元素

翻译|其它|编辑:郝浩|2008-05-21 10:30:47.000|阅读 1958 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

      在 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';
  }
标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:博客

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP