菜鸟成长记07 getElementsByClassName()的实现

何泽丰

rookie growth record

发布于：Jul 27, 2020

前言：我们在使用js使用DOM选中元素时一般都是document.getElementsByClassName()，那具体此方法是如何实现的呢？

思路

在整个页面中选取某个className，需要拿到整个DOM树。可以这样实现。
1
var allDomArray = document.getElementsByTagName("*");

因为拿到的类名不是规整的，有时候我们需要处理一下空格字符串。我们把处理该方法的操作封装在函数上

function trimSpace(strClass) {
			var reg = /\s+/g;
			var newstrClass = strClass.replace(reg, ' ').trim();//封装好的方法，去除首尾空格
			return newstrClass;
		}

在处理完类名的格式后，我们大概就能选中DOM结构。

Element.prototype.getElementsByClassName = Element.prototype.getElementsByClassName = function (_className) {
var allDomArray = document.getElementsByTagName("*");
			var lastDomArray = [];
			for (var i = 0; i < allDomArray.length; i++) {
				var lastClassName = trimSpace(allDomArray[i].className).trim();
				var classArray = lastClassName.split(' ');
				for (var j = 0; j < lastClassName.length; j++) {
					if (classArray[j] == _className) {
						lastDomArray = lastDomArray.push(classArray[i]);
						break;
					}
				}
			}
			return lastDomArray;
		}
}
    
    function trimSpace(strClass) {
			var reg = /\s+/g;
			var newstrClass = strClass.replace(reg, ' ');//封装好的方法，去除首尾空格
			return newstrClass;
		}

效果如下图

完整代码

document.getElementsByClassName = undefined;
Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = document.getElementsByClassName || function (_className) {
    // this DOM
    // 如果 children不兼容的话这里也要通过childNodes来做一下兼容
    var allDomArray = [].slice.call(document.getElementsByTagName('*'), 0);
    var newDomArray = [];
    function trimClassName(dom) {
        var reg = /\s+/g;
        // 把所有的空格变成一个先
        var newClassStr = dom.className.replace(reg, ' ');
        return newClassStr;
    }

    allDomArray.forEach(function (ele, index) {
        var newClassStr = trimClassName(ele).trim();
        var classNameArray = newClassStr.split(' ');
        classNameArray.forEach(function (className, index) {
            if (className == _className) {
                newDomArray.push(ele);
            }
        })
    });
    return newDomArray;
}