本文介绍 HTML5 新增的 DOM API getElementsByClassName()，说明其通过类名获取元素节点列表的基本用法及多类名匹配技巧。针对 IE8 以下不支持该接口的情况，提供了基于 document.all 或遍历标签的自定义函数实现方案，涵盖单类名与多类名匹配逻辑，并附带完整测试代码示例，帮助开发者解决旧版浏览器兼容性问题。
getElementsByClassName 基本介绍
getElementsByClassName() 是 HTML5 标准中新增的 DOM API，但在 IE8 及更低版本的浏览器中并不支持该搜索功能。
基本使用方法
以下是 getElementByClassName() 函数的具体使用方法：
在 JavaScript 中访问 DOM 时，一个关键挑战是如何通过元素的类名来选中特定元素。在 DOMContentLoaded 事件触发前，由于缺乏此类内置函数，开发者往往需要自行编写脚本来执行这些操作。许多现有的脚本库都围绕 getElementByClassName() 构建，这一解决方案最终在 HTML5 中得到标准化，并被现代浏览器原生支持。getElementsByClassName() 接收一个字符串作为输入参数，返回一个包含所有类名与该字符串匹配的元素节点的 NodeList。
var el = document.getElementsByClassName('foo');
若要在字符串中使用空格分隔多个类名，该函数也能匹配同时拥有这些类名的元素。以下代码示例选取了所有既包含 foo 类名又包含 bar 类名的元素：
var el = document.getElementsByClassName('foo bar');
低版本浏览器兼容方案
W3C 标准中并未定义 getElementByClassName 函数，因此我们可以自定义一个函数来模拟其行为。
通常有以下几种实现方法：
1、使用 jQuery 来实现
2、通过自定义 JavaScript 函数解决
当 class 属性只包含单个类名时，例如 class="test"
function getElementsByClassName (className) {
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++) {
if (all[e].className == className) {
elements[elements.length] = all[e];
break;
}
}
return elements;
}代码二、
function getElementsByClassName(className,parent){
var oParent=parent?document.getElementById("parent"):document;
var oLis=oParent.getElementsByTagName("*");
var arr=[];
for(var i=0;i<oLis.length;i++){
if(oLis[i].className==className){
arr.push(oLis[i])
};
return arr;
}
};当 class 包含多个类名时同样进行匹配，例如 class="test1 test2 test3"
function getElementsByClassName (className) {
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++) {
var classList = all[e].className.split(" ");
for(var i=0;i<classList.length;i++){
if (classList[i] == className) {
elements[elements.length] = all[e];
break;
}
}
}
return elements;
}下面提供一个完整的测试代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script>
/*JS写getElementByClassName;
我发现chorm、firefox、ie都支持document.getElementsByClassName */
window.onload = function(){
var adom = document.getElementsByClassName('a1');
for(var i = 0;i<adom.length;i++)
adom[i].style.backgroundColor="red";
};
function getElementByClassName(className){
var elems = [];
if(!document.getElementsByClassName){
alert("no exit");
var dom = document.getElementByTagName('*');
for(var i = 0;i<dom.length;i++){
if(dom[i].className == className)
elems.push(dom[i]);
}
}else{
elems = document.getElementsByClassName(className);
alert('exit');
}
return elems;
}
</script>
</head>
<body>
<div id="a1">a1</div>
<div class="a1">a1</div>
<div class="a1">a1</div>
<div id="a1">a1</div>
<div class="a1">a1</div>
</body>
</html>运行效果如图所示：
