Dom #snippet

Dom.md

DOM

hasClass

检测对象是否有指定的class

const hasClass = (el, cls) => {
  if (!el || !cls) return false
  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
  if (el.classList) {
    return el.classList.contains(cls)
  } else {
    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
  }
}

Demo:

hasClass(element, 'notExist') // false

addClass

给元素增加 class

const addClass = (el, cls) => {
  if (!el) return
  let curClass = el.className
  const classes = (cls || '').split(' ')

  for (let i = 0, j = classes.length; i < j; i++) {
    const clsName = classes[i]
    if (!clsName) continue

    if (el.classList) {
      el.classList.add(clsName)
    } else {
      if (!hasClass(el, clsName)) {
        curClass += ' ' + clsName
      }
    }
  }
  if (!el.classList) {
    el.className = curClass
  }
}

Demo:

addClass(element, 'newClass')

removeClass

删除指定的 class

const trim = (string) => {
  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
}

const removeClass = (el, cls) => {
  if (!el || !cls) return
  const classes = cls.split(' ')
  let curClass = ' ' + el.className + ' '

  for (let i = 0, j = classes.length; i < j; i++) {
    const clsName = classes[i]
    if (!clsName) continue

    if (el.classList) {
      el.classList.remove(clsName)
    } else {
      if (hasClass(el, clsName)) {
        curClass = curClass.replace(' ' + clsName + ' ', ' ')
      }
    }
  }
  if (!el.classList) {
    el.className = trim(curClass)
  }
}

Demo:

removeClass(element, 'clsRemoved')

scroll

页面滚动到指定位置

const scroll = ({el = window, from = 0, to, duration = 500}) => {
  const difference = Math.abs(from - to)
  const step = Math.ceil(difference / duration * 50)

  function _scroll (start, end, step) {
    if (start === end) return
    // 下一次移动的距离
    let d = (start + step > end) ? end : start + step
    if (start > end) {
      d = (start - step < end) ? end : start - step
    }

    if (el === window) {
      window.scrollTo(d, d)
    } else {
      el.scrollTop = d
    }
    window.requestAnimationFrame(() => _scroll(d, end, step))
  }
  _scroll(from, to, step)
}

Demo:

const element = document.getElementById(`elementId`)
// 获取当前元素的位置信息
let offset = element.getBoundingClientRect()
// 全屏滚动
scroll({to: offset.y})

download

文件下载

const download = (url, fileName) => {
  const link = document.createElement('a')
  link.download = fileName || ''
  link.style.display = 'none'
  link.href = url
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

Demo:

download('/api/donwnload', 'abc.xml')