JavaScript getElementsByClassName()

红太狼 2020-05-27 12:38 529阅读 0赞

# JavaScript getElementsByClassName()

getElementsByClassName() 方法可以获取具有指定 class 属性值的元素集合。

获取的元素集合的主要特点总结如下：

（1）.集合是动态的，自动感知集合元素的增加或者减少的变化。

（2）.集合中元素通过索引进行访问，索引值从 0 开始计算。

语法结构：

```javascript
node.getElementsByClassName(className)
```

语法解析：

（1）.node：可以是普通的 dom 元素节点，也可以是 document 。

（2）.className：class 属性值，多个用空格分隔。

**浏览器支持：**

（1）.IE9+ 浏览器支持此方法。

（2）.edge 浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera 浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safari 浏览器支持此方法。

**代码实例：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
</style>
<script>
window.onload = ()=> {
  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>
</ul>
</body>
</html>
```

将第二个和第四个 li 元素字体颜色设置为蓝色，代码分析如下：

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

（2）.所以 getElementsByClassName() 返回 class 属性值为 "ant" 元素集合。

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

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
.fontStyle{
  font-weight: bold;
}
</style>
<script>
window.onload = ()=> {
  let lis = document.getElementsByClassName("ant fontStyle");
  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 fontStyle">蒲公英云二</li>
  <li class="ant">蒲公英云三</li>
  <li class="fontStyle">蒲公英云四</li>
  <li>蒲公英云五</li>
  <li>蒲公英云六</li>
</ul>
</body>
</html>
```

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

（1）.class 属性值可以一次规定多了个类名，空格分隔，例如 `<div class=" a b c">`。

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

（3）.元素 class 属性值必须同时具有 "ant" 和 "fontStyle" 才能够匹配。

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

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
.fontStyle{
  font-weight: bold;
}
</style>
<script>
window.onload = ()=> {
  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 fontStyle">蒲公英云二</li>
  <li class="ant">蒲公英云三</li>
  <li class="fontStyle">蒲公英云四</li>
  <li>蒲公英云五</li>
  <li>蒲公英云六</li>
</ul>
</body>
</html>
```

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

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

（2）.第二个与第三个 li 元素满足条件，因为class 属性值中规定了 "ant" 样式类。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
ul {
  width :180px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
</style>
<script>
window.onload = ()=> {
  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">蒲公英云二</li>
  <li>蒲公英云三</li>
  <li class="ant">蒲公英云四</li>
  <li>蒲公英云五</li>
</ul>
</body>
</html>
```

getElementsByClassName() 方法的调用者可以是 document 也可以是其他普通 dom 元素节点。

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

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
ul {
  width: 150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left: 10px
}
ul li {
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  padding: 0;
}
#show {
  width: 160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script>
window.onload = ()=> {
  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 = ()=> {
    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，这一点需要特别注意，否则可能会造成一些不容易察觉的错误。