JavaScript中getElementsByClassName的实现

[ustccjw]

JavaScript中getElementsByClassName的实现

原生支持情况

HTML5中添加了getElementsByClassName方法，该方法只接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。

var allCurrentUserNames = document.getElementsByClassName('userName current');

IE9+以上和其他现代浏览器均支持。

自己实现

var getElementsByClass = function(searchClass, node, tag) {
    var classElements = new Array();
    if (node == null) {
        node = document;
    }
    if (tag == null) {
        tag = '*';
    }
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className)) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

还有基于DOM Tree Walker和XPath的实现方法，在浏览器的兼容性方面可能存在差异。因此理想的方案是：优先使用原生方法 + 配合使用上述的基于DOM的实现方法（IE8以下）。