JS DOM之getElementsByClassName

实现代码：

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');

JS DOM之getElementsByClassName

猜你喜欢