1、getSelection
- 是当前激活选中区（即高亮文本）；
- 在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，
1.1、getSelection相关属性：anchorNode、baseNode、extentNode、focusNode
有些比较老的浏览器可能没有baseNode和extentNode
anchor
选中区域的“起点”。
focus
选中区域的“结束点”。
range
是一种fragment(HTML片断)，它包含了节点或文本节点的一部分。一般情况下，同一时刻页面中只可能有一个range，也有可能是多个range（使用Ctrl健进行多选，不过有的浏览器不允许，例如Chrome）。可以从selection中获得range对象，也可以使用document.createRange()方法获得。
属性
- anchorNode 返回包含“起点”的节点
- anchorOffset “起点”在anchorNode中的偏移量
- focusNode 返回包含“结束点”的节点。
- focusOffset “结束点”在focusNode中的偏移量。
- isCollapsed “起点”和“结束点”是否重合。
- rangeCount
返回selection中包含的range对象的数目，一般存在一个range，Ctrl健配合使用可以有多个，一般浏览器都是一个，唯独 firefox 可以多个
通过实例来理解这几个属性吧
0.png
1.png
2.png
3.png
4.png
https://stackoverflow.com/questions/32227149/changing-caret-color-in-contenteditable-div
