javascript通过className獲取文件元素

转载 2007年09月29日 17:07:00

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

 

javascript通过className獲取文件元素

在 JavaScript 內建的核心中,document 物件及 Element 物件總共可以透過三個方式來獲取其下的元素,分別是: getElementById(id)getElementsByNa...
  • fightplane
  • fightplane
  • 2007年03月14日 13:24
  • 1288

javascript通过className獲取文件元素

From: http://blog.csdn.net/xpnew/archive/2007/09/29/1806714.aspx function StorePage(){d=document;t=d...
  • newweapon
  • newweapon
  • 2008年05月19日 15:16
  • 721

js 通过className来获取元素

在网页中除了需要用id, name, tag等来获取元素外,也需要用css的class来获取。今天找了下资料,记录一下。原理: 用document.getElementsByTagName(‘*’);...
  • qilixiang012
  • qilixiang012
  • 2015年05月22日 15:18
  • 6017

JS封装通过className获取元素的函数

JS封装通过className获取元素的函数
  • m0_38099607
  • m0_38099607
  • 2017年04月28日 13:18
  • 237

前端实践--JavaScript--控制类名(className 属性)+改变样式

通过className属性来设置元素的样式: 编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数,点击相应按钮执行相应操作,点击"取消设置"按钮后,提示是否取消设置,如是执...
  • Lovejulyer
  • Lovejulyer
  • 2016年05月07日 14:09
  • 7013

JavaScript 通过ClassName获取元素

function getByClass(sClass){ var aResult=[]; var aEle=document.getElementsByTagName('*'); ...
  • u011948354
  • u011948354
  • 2015年09月29日 19:52
  • 199

使用javascript通过className来获取元素

在网页中除了需要用id, name, tag等来获取元素外,也需要用css的class来获取。今天找了下资料,记录一下。 原理: 用document.getElementsByTagName(*);来...
  • greenerycn
  • greenerycn
  • 2008年10月07日 21:01
  • 9649

Appium基础篇8-元素定位之by_class_name

本篇继续学习Appium在安卓上的页面元素定位方法。前面我们已经介绍了两种,by_id和by_android_uiautomator,这篇来学习by_class_name。个人觉得by_class_n...
  • u011541946
  • u011541946
  • 2017年09月10日 14:09
  • 691

js封装获取元素类名(className)的方法

封装了一个方法,用来通过父元素获取节点下的指定类名元素
  • Resen4983
  • Resen4983
  • 2017年04月11日 12:42
  • 2307

[ javascript ] getElementsByClassName与className和getAttribute!

对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题。 那么需要模拟出getElementsByClassName 需要采用className属性...
  • yangzhihello
  • yangzhihello
  • 2014年08月30日 18:03
  • 3011
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript通过className獲取文件元素
举报原因:
原因补充:

(最多只允许输入30个字)