JS DOM之getElementsByClassName

最新推荐文章于 2025-05-26 15:54:59 发布

SkullSky

最新推荐文章于 2025-05-26 15:54:59 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： JS getElementsByClassNa

本文链接：https://blog.youkuaiyun.com/SkullSky/article/details/61917334

前端开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍了JavaScript中实现获取指定类名元素的多种方法，包括基础版本和优化版本，适用于处理嵌套类名和避免重复计算的情况。示例代码展示了如何获取类名为'box'的元素，包括从整个文档、特定父元素以及特定标签中查找。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现代码：

function getElementsByClassName(parent,tagName,className){

    var aEls = parent.getElementsByTagName(tagName);
    var arr = [];

    for(var i=0; i<aEls.length; i++){

	var aClassName = aEls[i].className.split(' ');

	for(var j=0; j<aClassName.length; j++){
		if(aClassName[j] == className){
			arr.push(aEls[i]);
			// 避免联级类名重复计算
			break;
		}

	}
    }
    return arr;
}

基本原理：

要查找指定区域中类名为classname的指定类别标签，首先定位到html代码中指定的区域，然后遍历该区域中指定类别的标签，查找其类名，记录下与classname相同的标签。

示例代码：要获取className为box的标签

<script type="text/javascript">
		window.onload = function() {

			var oUl1 = document.getElementById('ul1');
			var oUl2 = document.getElementById('ul2');
            }
<body>
	<ul id="ul1">
		<li class="box box">1111</li>
		<li class="box1">2222</li>
		<li class="box">3333</li>
		<li class="box box2">4444</li>
	</ul>
	<ul id="ul2">
		<li class="box">1111</li>
		<li class="box1">2222</li>
		<li class="box">3333</li>
		<li class="box box2">4444</li>
	</ul>
	<p class="box">777777</p>
	
</body>

版本1：获取文档中所有类名为box的标签。

首先获取html代码中所有的标签，然后遍历每个标签的className，记录下与classname相同的标签。

function getElementsByClassName(className){

    var aEls = document.getElementsByTagName('*');
    var arr = [];

    for(var i=0; i<aEls.length; i++){

		if(aEls[i].className == className){
			arr.push(aEls[i]);
		}

	}
    }
    return arr;
}
var aLi = getElementsByClassName('box');

版本2：当类名存在嵌套时，如<li class="box box2">1111</li>，上述无法正常匹配。须先将每个标签的类名按空格分割，对分割后的每一个子类名分别与className比较。

function getElementsByClassName(className){

    var aEls = document.getElementsByTagName('*');
    var arr = [];

    for(var i=0; i<aEls.length; i++){

	var aClassName = aEls[i].className.split(' ');

	for(var j=0; j<aClassName.length; j++){
		if(aClassName[j] == className){
			arr.push(aEls[i]);
		}

	}
    }
    return arr;
} 
var aLi = getElementsByClassName('box');
console.log(aLi.length);

版本3：当类名由于手误存在重复部分时，如<li class="box box">1111</li>，会重复计算，因此对同一个标签，一旦匹配到了就不在继续往后匹配。

function getElementsByClassName(className){

    var aEls = document.getElementsByTagName('*');
    var arr = [];

    for(var i=0; i<aEls.length; i++){

	var aClassName = aEls[i].className.split(' ');

	for(var j=0; j<aClassName.length; j++){
		if(aClassName[j] == className){
			arr.push(aEls[i]);
                        // 避免联级类名重复计算
                        break;

		}

	}
    }
    return arr;
} 
var aLi = getElementsByClassName('box');
console.log(aLi.length);

版本4：如果只想查找第一个ul标签中的类名为box的li标签，或者只想查找html文档中类名为box的p标签

function getElementsByClassName(parent,tagName,className){

    var aEls = parent.getElementsByTagName(tagName);
    var arr = [];

    for(var i=0; i<aEls.length; i++){

	var aClassName = aEls[i].className.split(' ');

	for(var j=0; j<aClassName.length; j++){
		if(aClassName[j] == className){
			arr.push(aEls[i]);
			// 避免联级类名重复计算
			break;
		}

	}
    }
    return arr;
}
var aLi = getElementsByClassName(document,'li','box');
// var aLi = getElementsByClassName(oUl1,'li','box');
var aLi = getElementsByClassName(document,'p','box');