源生javascript 添加getElementByClass方法

直接上代码：

document.getElementByClass = function(n) { 
            var el = [],
                _el = document.getElementsByTagName('*');
            for (var i=0; i<_el.length; i++ ) {
 
                if (_el[i].className == n ) {
                    el[el.length] = _el[i];
                }
            }
            return el;
        }

使用也很简单，比如：

var nick = document.getElementByClass("user-nick")[0].innerText;

Update20120703:

上面提到的函数会存在一些问题，比如一个元素设置两个class的话，就会有问题。

在stackoverflow上找到了更加完美的解决方案：

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

使用方法：

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

这个方案还有一个好处，就是考虑了Firefox, Safari, 以及 Opera等浏览器已经支持getElementsByClassName方法的情况并进行了处理。

转载于:https://www.cnblogs.com/jiji262/archive/2012/06/28/2567808.html