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 // ''

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

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

• 一些HTML标签对嵌套的后代标签有限制, 导致越来越多的项目选择直接将div和span作为解决方案.
• 网页提供的用户界面(元素)是碎片化的, 自制组件在网页开发过程中很普遍.
• 即使网页像Windows程序那样有着标准的系统控件, 最终也会因为不满足实际需求而被自定义控件替代.
• 可访问性工具市场未能达成统一意见, 也没有跟上最新的推荐标准.
• 开发人员在考虑功能实现的同时还需要考虑可访问性, 形成了认知负担.
• 在相当多的国家缺乏保证可访问性的法律法规, 而大部分业务并不考虑残障人士市场, 因此缺乏驱动力.