您的位置:首页> 前端教程> JS教程
文章导航

getElementsByClassName()

2019-1-20 23:18| 作者: admin| 查看: 2879| 评论: 0|来自: 蚂蚁部落

本文将通过代码实例详细介绍一下getElementsByClassName方法的应用。

class是标签最重要且最为常用的属性之一,通过此属性可以设置元素样式,JS也可以利用此属性检索元素。

getElementsByClassName方法可以获取具有指定class属性值的元素,返回值是一个集合。

集合是动态的,能够自动感知集合中元素增加或者减少,后面会有代码实例演示。

当前具有一定浏览器兼容性问题,低版本IE浏览器不支持,随着软硬件的不断进步,此方法的应用会越来越广泛,如果需要兼容低版本IE,不用担心,本文最后会给出兼容低版本IE浏览器的解决方案。

语法结构:

[JavaScript] 纯文本查看 复制代码
getElementsByClassName(classname)

参数解析:

(1).classname:必需,class属性值。

浏览器支持:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
}
</style>
<script>
window.onload = function () {
  let lis = document.getElementsByClassName("ant");
  let len=lis.length;
  for (let index = 0; index < len; index++) {
    lis[index].style.color = "blue";
  }
}
</script>
</head>
<body>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li class="ant">蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li class="ant">蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
  <li>蚂蚁部落六</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/231931fymtw9m3ymyzy8yd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码将第二个和第四个li元素字体颜色设置为蓝色,代码分析如下:

(1).方法可以根据class属性值检索元素,返回值是一个集合。

(2).所以上述代码返回class属性值为"ant"的元素集合。

(3).然后通过for循环,将集合中的元素字体颜色设置为蓝色。

特别说明:参数值是class属性值,千万不要在其见面加点,和querySelector与querySelectorAll区分开。

上述两个方法的具体用法可以参阅如下两篇文章:

(1).querySelector() 方法一章节。

(2).querySelectorAll方法一章节。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
}
.fontsize{
  font-size: 20px;
}
</style>
<script>
window.onload = function () {
  let lis = document.getElementsByClassName("ant fontsize");
  let len=lis.length;
  for (let index = 0; index < len; index++) {
    lis[index].style.color = "blue";
  }
}
</script>
</head>
<body>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li class="ant fontsize">蚂蚁部落二</li>
  <li class="ant">蚂蚁部落三</li>
  <li class="fontsize">蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
  <li>蚂蚁部落六</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/232036tx9yyt126aa7ovxa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码将第二个li元素字体颜色设置为蓝色,代码分析如下:

(1).class属性值可以一次规定多了个类名,使用空格分隔,例如<div class=" a b c">。

(2).getElementsByClassName方法的参数也可以是多个类名,使用空格分隔。

(3).元素class属性值必须同时具有"ant"和"fontsize"才能够匹配。

(4).所以只有第二个li元素的字体颜色才能够被设置为蓝色,其他的li元素都不满足条件。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
}
.fontsize{
  font-size: 20px;
}
</style>
<script>
window.onload = function () {
  let lis = document.getElementsByClassName("ant");
  let len=lis.length;
  for (let index = 0; index < len; index++) {
    lis[index].style.color = "blue";
  }
}
</script>
</head>
<body>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li class="ant fontsize">蚂蚁部落二</li>
  <li class="ant">蚂蚁部落三</li>
  <li class="fontsize">蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
  <li>蚂蚁部落六</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/232104b55blpu0p9us91wb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二个和第三个li元素字体颜色被设置为蓝色,代码分析如下:

(1).如果想要被方法检索到,元素class属性值必须具有getElementsByClassName方法参数规定的类。

(2).第二个与第三个li元素满足条件,也可以看到无需完全匹配。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
}
.fontsize{
  font-size: 20px;
}
</style>
<script>
window.onload = function () {
  let obox=document.getElementById("box");
  let lis = obox.getElementsByClassName("ant");
  let len=lis.length;
  for (let index = 0; index < len; index++) {
    lis[index].style.color = "blue";
  }
}
</script>
</head>
<body>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li class="ant fontsize">蚂蚁部落二</li>
  <li class="ant">蚂蚁部落三</li>
  <li class="fontsize">蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
  <li>蚂蚁部落六</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/232155b20yjz8asr7gt89r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

与前一个代码表现完全一样,代码分析如下:

(1).方法的调用对象没必要必须是document对象,也可以是其他元素对象。

(2).使用其他元素对象可以减少方法的检索范围,有利于提高效率。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
}
.fontsize{
  font-size: 20px;
}
</style>
<script>
window.onload = function () {
  let obox=document.getElementById("box");
  let obt=document.getElementById("bt");
  let oshow=document.getElementById("show");
  let lis = obox.getElementsByClassName("ant");
  oshow.innerHTML=lis.length;
  obt.onclick=function(){
    lis[0].remove();
    oshow.innerHTML=lis.length;
  }
}
</script>
</head>
<body>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li class="ant fontsize">蚂蚁部落二</li>
  <li class="ant">蚂蚁部落三</li>
  <li class="fontsize">蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
  <li>蚂蚁部落六</li>
</ul>
<div id="show"></div>
<input type="button" id="bt" value="查看演示"/>
</body>
</html>

此方法获取的元素集合是动态的,也就是能够自动感知集合元素的添加或者删除。

默认,集合中的元素是两个,点击按钮之后,删除集合中的第一个li元素,集合能够感知这种改变,所以div中显示的数量变为1,这一点需要特别注意,否则可能会造成一些比较奇特的错误,并且还不容易差错。

文章的开头部分提到过,低版本IE浏览器不支持此方法,虽然以后是问题,但是当前还有不少低版本IE用户,可能需要进行兼容,下面分享一段能够兼容所有浏览器的方法改写,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  width:150px;
  height:50px;
  margin:0px auto;
  background:#CCC;
  text-align:center;
  font-size:12px;
}
</style>
<script>
if(!document.getElementsByClassName){
  document.getElementsByClassName = function(className, element){
    var children = (element || document).getElementsByTagName('*');
    var elements = new Array();
    for (var index=0; index<children.length; index++){
      var child = children[index];
      var classNames = child.className.split(' ');
      for (var j=0; j<classNames.length; j++){
        if (classNames[j] == className){ 
          elements.push(child);
          break;
        }
      }
    } 
    return elements;
  };
}
window.onload=function(){
  var odiv=document.getElementsByClassName("ant")[0];
  odiv.innerHTML="蚂蚁部落";
}
</script>
</head>
<body>
<div class="ant"></div>
</body>
</html>

上述代码对getElementsByClassName方法进行了兼容性处理。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部