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>
- document.documentElement ->
- body
<body>
or<frameset>
or null
target vs currentTarget vs relatedTarget
- target - 触发事件的元素
- currentTarget - 事件监听的元素
- relatedTarget
- 鼠标事件相关元素
- 进入、离开
KeyboardEvent.key
- Chrom 51+
- Key Values
KeyboardEvent.code
尽量使用 KeyboardEvent.key
- KeyboardEvent.code
- 忽略用户键盘布局
- 更适用于游戏等非输入场景
- Chrom 48+
- Code Values
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