Skip to main content

JS DOM FAQ

query sibling​

function siblings(node, query) {
  var parent = node.parentElement;
  var index = [].slice.call(parent.children).indexOf(node) + 1;
  // nth-child 会匹配到下级
  return parent.querySelectorAll(`:nth-child(${index}) ~ ${query}`);
}

DOM 事件​

  • window
    • appinstalled
    • devicemotion, deviceorientation
    • WindowEventHandlers
      • hash, storage, online, offline, load, unload
  • document
    • afterscriptexecute, beforescriptexecute, fullscreenchange, fullscreenerror, selectionchange, visibilitychange
    • 大多事件在 window 也能监听到
  • GlobalEventHandlers
    • HTMLElement, Document, Window 都支持的事件
  • 其他
    • navigator.clipboard - cut, copy, paste
    • EventTarget 的子类

document vs body​

  • document - HTML
    • document.documentElement -> <html>
  • body
    • <body> or <frameset> or null

target vs currentTarget vs relatedTarget​

  • target - 触发事件的元素
  • currentTarget - 事件监听的元素
  • relatedTarget
    • 鼠标事件相关元素
    • 进入、离开

KeyboardEvent.key​

KeyboardEvent.code​

尽量使用 KeyboardEvent.key
  • KeyboardEvent.code
    • 忽略用户键盘布局
    • 更适用于游戏等非输入场景

Refused to set unsafe header "Content-Length"​

  • W3C XMLHttpRequest Level 1 4.6.2 定义的不允许修改的头
    • Accept-Charset
    • Accept-Encoding
    • Access-Control-Request-Headers
    • Access-Control-Request-Method
    • Connection
    • Content-Length
    • Cookie
    • Cookie2
    • Date
    • DNT
    • Expect
    • Host
    • Keep-Alive
    • Origin
    • Referer
    • TE
    • Trailer
    • Transfer-Encoding
    • Upgrade
    • User-Agent
    • Via