JavaScript通过className获取元素

SJY发表于:2018年06月04日 12:14 • 阅读:

在 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('*');//定义一个数组el,定义一个变量_el,并把获取所有HTML标签的对象赋值给_el
    for (var i=0; i<_el.length; i++ ) {
        if (_el[i].className == n ) {//当标签中存在class的名称跟我们设定的相同时,执行里面的内容
            el[el.length] = _el[i];//把该标签赋值给数组el,这里[el.length]为数组长度,默认为0,当第一次存在符合条件的标签赋值给el后,相当于el[0]=_el[i];第二次赋值,因为该数组已经有一个值了,就是说他的长度此时是1,相当于el[1]=_el[i];可以在其上方alert(el.length);就知道其增长过程
        }
    }
    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';
}


 

欢迎转载,但请保留原文地址 http://www.sjyhome.com/javascript/1388.html

回复(0)