简易版DOM封装

在无障碍工具项目的实际开发中，为了方便的获取页面元素，对页面DOM操作进行了轻量级封装，虽没有jQuery强大，但也可满足大部分使用场景了。相关核心代码如下所示：

  var getDom = function (el) {
    if (!el) {
      return el
    }
    if (typeof el === 'string') {
      return document.getElementById(el.replace(/^#/, ''))
    }
    if (!el.nodeName && el.length && el[0].nodeName) {
      // 如果是一个jquery对象
      return el[0]
    }
    return el
  }
  var Dom = {}
  Dom.hasClass = function (elem, className) {
    var el = getDom(elem)
    className = className.replace(/\-/, '\\-')
    return new RegExp('(?:^|\\s)' + className + '(?:\\s|$)').test(el.className)
  }
  Dom.addClass = function (elem, className) {
    var el = getDom(elem)
    if (!Dom.hasClass(el, className)) {
      el.className = el.className ? el.className + ' ' + className : className
    }
    return el
  }

  Dom.removeClass = function (elem, className) {
    var el = getDom(elem)
    className = className.replace(/\-/, '\\-')
    var classToRemove = new RegExp('(^|\\s)' + className + '(?=\\s|$)', 'i')
    el.className = el.className
      .replace(classToRemove, '')
      .replace(/^\s+|\s+$/g, '')
    return el
  }
  Dom.events = {}
  Dom.idSeed = 0
  Dom.addEvent = function (el, type, className, handler) {
    var id = el.id || (el.id = 'id' + ++Dom.idSeed)
    if (typeof className === 'function' && !handler) {
      handler = className
      className = undefined
    }
    var delegate = function (evt) {
      return handler.call(el, evt)
    }
    if (className) {
      className = className.replace(/\./, '')
      delegate = function (evt) {
        evt = evt || window.event
        var node = evt.target || evt.srcElement
        while (node && node != el) {
          if (Dom.hasClass(node, className)) {
            return handler.call(node, evt)
          }
          node = node.parentNode
        }
      }
    }
    delegate.origHandler = handler
    delegate.delegateSelector = className
    if (!Dom.events[id]) {
      Dom.events[id] = {}
    }
    if (!Dom.events[id][type]) {
      Dom.events[id][type] = []
      var callFuncList = function (evt) {
        if (Dom.events[id][type]) {
          for (var i = 0; i < Dom.events[id][type].length; i++) {
            var fn = Dom.events[id][type][i]
            fn(evt)
          }
        }
      }
      if (el.addEventListener) {
        el.addEventListener(type, callFuncList)
      } else {
        el.attachEvent('on' + type, callFuncList)
      }
    }
    Dom.events[id][type].push(delegate)
  }
  Dom.removeEvent = function (el, type, className, handler) {
    var id = el.id || (el.id = 'id' + ++Dom.idSeed)
    if (typeof className === 'function' && !handler) {
      handler = className
      className = undefined
    }
    if (!Dom.events[id]) {
      return false
    }
    if (type && !Dom.events[id][type]) {
      return false
    }
    if (!handler && !className) {
      if (!type) {
        Dom.events[id] = {}
      } else {
        Dom.events[id][type] = []
      }
      return true
    }
    for (var i = Dom.events[id][type].length - 1; i >= 0; i--) {
      var fn = Dom.events[id][type][i]
      if (
        fn.origHandler == handler &&
        (!className || fn.delegateSelector == className)
      ) {
        Dom.events[id][type].splice(i, 1)
      }
    }
  }
  Dom.attr = function (el, name, value) {
    if (arguments.length === 1) {
      var map = {}
      var attributes = el.attributes
      var aLength = attributes.length
      for (var a = 0; a < aLength; a++) {
        map[attributes[a].name.toLowerCase()] = attributes[a].value
      }
      return map
    }
    if (arguments.length === 2) {
      return el.getAttribute(name)
    }
    el.setAttribute(name, value)
  }