zouyu
javaScrip

document

# 1. 原生 js 的 dom 和 html 操作

  • https://www.runoob.com/jsref/dom-obj-event.html
  • https://www.runoob.com/jsref/dom-obj-all.html

# 1.1. 移除 html node.removeChild(node)

https://www.runoob.com/try/try.php?filename=tryjsref_node_removechild

# 2. 监听切换 tab（页面可见性）

document.addEventListener('visibilitychange', () => {
  document.title = document.hidden
    ? '用户离开了' + document.hidden
    : '用户回来了' + document.hidden
})

# 3. 插入可选 div 的元素

;<div contenteditable="true" />

const imgSrc = require(`@/assets/img/emoji/${hoverPath}`)
const imgTag = `<img src="${imgSrc}" width="28" height="28" alt="${info}">`
document.execCommand('insertHTML', false, imgTag)

# 4. 鼠标事件

  1. 监听鼠标按下事件
const containerDom = document.getElementById('container') //需要调整尺寸的div
containerDom.addEventListener('mousedown', mousedown) // 鼠标按下事件

function mousedown(event) {
  const direction = getDirection(event)
  // 当位置为四个边和四个角时才开启尺寸修改
  if (direction !== '') {
    resizeable = true
    direc = direction
    clientX = event.clientX
    clientY = event.clientY
  }
}
  1. 监听鼠标松开事件
document.addEventListener('mouseup', mouseup) // 鼠标松开事件

// 鼠标松开时结束尺寸修改，重置是否开启尺寸修改及方向
function mouseup() {
  resizeable = false
  direc = ''
}

# 5. 在新页面监听页面销毁事件

window.addEventListener('onunload', () => {
  // 执行旧页面代码
})

# 6. 往返刷新页面

window.addEventListener('pageshow', e => e.persisted && location.reload())

# 7. Safari 浏览器的日期格式

Safari 浏览器用 YYYY/MM/DD HH:mm:ss 这种日期格式， 然而接口返回字段的日期格式通常是 YYYY-MM-DD HH:mm:ss，那么需替换其中的-为/。

new Date('2019-03-31 21:30:00') // Invalid Date  ,错误

// 正确
const date = '2019-03-31 21:30:00'
new Date(date.replace(/\-/g, '/'))

# 8. 修复高度坍塌

const input = document.getElementById('input')
let scrollTop = 0
input.addEventListener('focus', () => {
  scrollTop = document.scrollingElement.scrollTop
})
input.addEventListener('blur', () => {
  document.scrollingElement.scrollTo(0, scrollTop)
})

# 9. 修复输入监听 在苹果系统上的输入框输入文本，keyup/keydown/keypress 事件可能会无效

// 解决方案1：使用input事件代替输入框的keyup/keydown/keypress事件
// 即 @input
上次更新: