不要在dom.classList .forEach遍历时删除它的项

353 阅读1分钟

问题:一个需求,需要先删除dom所有特定前缀的className,再添加两个className。发现dom.classList .forEach遍历删除时,有的className没能删除。

解决方法:在classList的forEach遍历时不要同时进行会改变classList长度的操作,不然会出现遍历异常的问题。所以先记录下要删的className,待遍历完后再删。

第一次实现代码

function changeDomClassName (domQueryString, prefix, status) {
  const dom = window.document.querySelector(domQueryString)
  if (!dom) {
    return
  }
  dom.classList.forEach(item => {
    if (typeof item === 'string' && item.startsWith(prefix)) {
      dom.classList.remove(item)
    }
  })
  dom.classList.add(prefix + '-left-' + status)
  dom.classList.add(prefix + '-right-' + status)
}

最终实现代码

function changeDomClassName (domQueryString, prefix, status) {
  const dom = window.document.querySelector(domQueryString)
  if (!dom) {
    return
  }
  const removingList = []
  dom.classList.forEach(item => {
    if (typeof item === 'string' && item.startsWith(prefix)) {
      removingList.push(item)
    }
  })
  dom.classList.remove(...removingList)
  dom.classList.add(prefix + '-left-' + status)
  dom.classList.add(prefix + '-right-' + status)
}