js属性兼容

getElementsByClassName兼容(只支持单个className查找)

    /*
    * node {节点名称}
    * 
    * classname {需要查找的class名称}
    */
    function getElementsByClassName(node,classname) {
      if (node.getElementsByClassName) {
          // 使用现有方法
          return node.getElementsByClassName(classname)
      }
      else {
          var results = new Array();
          var elems = node.getElementsByClassName('*')
          for (var i=0;i<elems.length;i++) {
              if (elems[i].className.indexOf(classname) !== -1) {
                  return results[results.length] = elems[i]
              }
          }
          return results;
      }
    }

getElementsByClassName兼容(支持多个className查找)

    /*
    * node {节点名称}
    * 
    * className {一个或多个类名,用空格分隔。多个类名称要求每个匹配都具有指定的所有类} {必须}
    * tag {指定要匹配的元素的标签名称} {可选}
    * elm {引用DOM元素以查看其子项中的匹配项} {可选}
    */
    
    var getElementsByClassName = function (className,tag,elm) {
        // 使用现有方法
        if (document.getElementsByClassName) {
            getElementsByClassName = function(className,tag,elm) {
              // 获取节点
              elm = elm || document;
              // 获取查找到的元素 className参数
              var elements = elm.getElementsByClassName(className);
              // 获取节点名称  tag参数
              var nodeName = (tag) ? new RegExp('\\b' + tag + '\\b', 'i') : null;
              // 返回查找到的节点
              var returnElements = [];
              // 当前节点
              var current;
              
              for (var i=0,il=elements.length;i<il;i++) {
                  current = elements[i];
                  if (!nodeName || nodeName.test(current.nodeName)) {
                      returnElements.push(current);
                  }
              }
              return returnElements;
            }
        }
        // 用于提升查找性能
        else if (document.evaluate) {
            getElementsByClassName = function(className,tag,elm) {
              tag = tag || '';
              elm = elm || document;
              
              // 分割多个 className
              var classes = className.splice(' ');
              var classesToCheck = '';
              
              // 检查页面名称空间
              var xhtmlNamespace = 'http://www.w3.org/1999/xhtml';
              var namespaceResolve = (document.documentElement.namespaceURI === xhtmlNamespace) ? xhtmlNamespace : null;
              
              var returnElements  = [];
              var elements;
              var node;
              
              for (var j=0,jl=classes.length;j<jl;j++) {
                  classesToCheck += "[contains(concat(' ',@class,' '),'" + classes[j] + " ')]";
              }
              
              
              /*
              *  xpathExpression  {是表示要评估的XPath的字符串}
              *  contextNode {指定查询的上下文节点,通常document作为上下文节点传递}
              *  namespaceResolver {用于解析XPath本身中的前缀,以便它们可以与文档匹配}
              *  resultType {一个整数,对应于XPathResult要返回的结果的类型}
              *  result {一个现有的XPathResult用于结果}
              */
              try {
                elements = document.evaluate('.//' + tag + classesToCheck, elm, namespaceResolve, 0, null);   
              }
              catch (e) {
                  elements = document.evaluate('.//' + tag + classesToCheck, elm, null, 0, null);
              }
              
              // elements.iterateNext {访问返回的节点}
              while ((node = elements.iterateNext())) {
                  returnElements.push(node)
              }
              return returnElements;
            }
        }
        else {
            getElementsByClassName = function(className,tag,elm) {
              tag = tag || '';
              elm = elm || document;
              
              // 分割多个 class
              var classes = className.splice(' ');
              var classesToCheck = '';
              
              // 查找所有节点
              var elements = (tag === '*' && elm.all) ? elm.all : elm.getElementsByTagName(tag);
              // 当前节点
              var current;
              // 结果数组
              var returnElements = [];
              // 判断节点是否匹配条件
              var match;
              
              for (var k=0,kl=classes.length;k<kl;k++) {
                  classesToCheck.push(new RegExp('(^|\\s)' + classes[k] + '(\\s|$)'));
              }
              
              for (var l=0,ll = elements.length;l<ll;l++) {
                  current = elements[i];
                  match = false;
                  for (var m=0,ml=classesToCheck.length;m<ml;m++) {
                      match = classesToCheck[m].test(current.className);
                      if (!match) {
                          break;
                      }
                  }
                  if (match) {
                      returnElements.push(current);
                  }
              }
              return returnElements;
            }
        }

        return getElementsByClassName(className, tag, elm);
    }

insertAfter(在现有元素后面插入一个新元素)

    function insertAfter(newElement,targetElement) {
      var parent = targetElement.parentNode;
      // 检查目标元素是不是 parent 的最后一个子元素
      if (parent.lastChild === targetElement) {
          // 把新元素追加到 parent 元素上
          parent.appendChild(newElement);
      }
      else {
          // 把新元素插入到目标元素和目标元素的下一个兄弟元素之间
          parent.insertBefore(newElement, targetElement.nextSibling);
      }
    }