DOM

1. 1.
   捕获阶段(capture phase)
   从最外层的父元素开始发出事件, 层层递进直至目标(真正发出事件的元素).
   在捕获阶段可以先于发出事件的元素(目标)进行操作,
   需要在注册事件监听器时设置 useCapture 或 { capture: true } (默认为false).
2. 2.
   目标阶段(target phase)
   调用目标元素直接相关的事件监听器, 这是 DOM 事件流里最不反常识的部分.
   在该阶段可以调用 stopPropagation() 阻止事件冒泡.
3. 3.
   冒泡阶段(bubble phase)
   从目标元素向外开始发出事件, 层层递进直至最外层的父元素.
   如果目标阶段的元素阻止事件冒泡, 则该阶段不会发生.

const element = document.createElement('div')
element.style.width = '100%'
element.style.height = '100%'
element.offsetWidth // 0
element.offsetHeight // 0
element.getBoundingClientRect()
// {
//   bottom: 0,
//   height: 0,
//   left: 0,
//   right: 0,
//   top: 0,
//   width: 0,
//   x: 0,
//   y: 0
// }
window.getComputedStyle(element).width // ''
window.getComputedStyle(element).height // ''

• date(专门的输入控件)
• time(专门的输入控件)
• datetime-local(专门的输入控件, Firefox有bug所以不支持)
• month(专门的输入控件)
• week(专门的输入控件)
• tel(专门的键盘)
• number(专门的键盘)
• password(会出现密码管理器的提示)
• color(专门的输入控件)

• innerText
  获取基于布局的内容文本.
  该属性忠于以文本在网页上的排版效果返回文本(因此性能较差). 其结果类似于选中文本后复制得到的文本.
  由IE最先引入, 标准化较晚.
  由于实现该属性需要引入布局支持, JSDOM未正确实现该属性.

• textContent
  获取所有文本节点的串联文本, 这意味着空白符将与源代码一致.
  该属性会忽略文本在网页上的显示效果, 忽略`<br>`, `<p>`等元素对排版的影响.