javascript基础从小白到高手系列一百三十七：范围折叠

如果范围并没有选择文档的任何部分，则称为折叠（collapsed）。折叠范围有点类似文本框：如果
文本框中有文本，那么可以用鼠标选中以高亮显示全部文本。这时候，如果再单击鼠标，则选区会被移
除，光标会落在某两个字符中间。而在折叠范围时，位置会被设置为范围与文档交界的地方，可能是范
围选区的开始处，也可能是结尾处。
折叠范围可以使用collapse()方法，这个方法接收一个参数：布尔值，表示折叠到范围哪一端。
true 表示折叠到起点，false 表示折叠到终点。要确定范围是否已经被折叠，可以检测范围的collapsed
属性：
range.collapse(true); // 折叠到起点
console.log(range.collapsed); // 输出true
测试范围是否被折叠，能够帮助确定范围中的两个节点是否相邻。例如有以下HTML 代码：

Paragraph 1

Paragraph 2

如果事先并不知道标记的结构（比如自动生成的标记），则可以像下面这样创建一个范围： let p1 = document.getElementById("p1"), p2 = document.getElementById("p2"), range = document.createRange(); range.setStartAfter(p1); range.setStartBefore(p2); console.log(range.collapsed); // true 在这种情况下，创建的范围是折叠的，因为p1 后面和p2 前面没有任何内容。 范围比较 如果有多个范围，则可以使用compareBoundaryPoints()方法确定范围之间是否存在公共的边 界（起点或终点）。这个方法接收两个参数：要比较的范围和一个常量值，表示比较的方式。这个常量 参数包括：  Range.START_TO_START（0），比较两个范围的起点；  Range.START_TO_END（1），比较第一个范围的起点和第二个范围的终点；  Range.END_TO_END（2），比较两个范围的终点；  Range.END_TO_START（3），比较第一个范围的终点和第二个范围的起点。 compareBoundaryPoints()方法在第一个范围的边界点位于第二个范围的边界点之前时返回-1， 在两个范围的边界点相等时返回0，在第一个范围的边界点位于第二个范围的边界点之后时返回1。来 看下面的例子： let range1 = document.createRange(); let range2 = document.createRange(); let p1 = document.getElementById("p1"); range1.selectNodeContents(p1); range2.selectNodeContents(p1); range2.setEndBefore(p1.lastChild); console.log(range1.compareBoundaryPoints(Range.START_TO_START, range2)); // 0 console.log(range1.compareBoundaryPoints(Range.END_TO_END, range2)); // 1 在这段代码中，两个范围的起点是相等的，因为它们都是selectNodeContents()默认返回的值。 因此，比较二者起点的方法返回0。 复制范围 调用范围的cloneRange()方法可以复制范围。这个方法会创建调用它的范围的副本： let newRange = range.cloneRange(); 新范围包含与原始范围一样的属性，修改其边界点不会影响原始范围。 清理 在使用完范围之后，最好调用detach()方法把范围从创建它的文档中剥离。调用detach()之后， 就可以放心解除对范围的引用，以便垃圾回收程序释放它所占用的内存。下面是一个例子： range.detach(); // 从文档中剥离范围 range = null; // 解除引用 这两步是最合理的结束使用范围的方式。剥离之后的范围就不能再使用了。 小结 DOM2 规范定义了一些模块，用来丰富DOM1 的功能。DOM2 Core 在一些类型上增加了与XML 命名空间有关的新方法。这些变化只有在使用XML 或XHTML 文档时才会用到，在HTML 文档中则没 有用处。DOM2 增加的与XML 命名空间无关的方法涉及以编程方式创建Document 和DocumentType 类型的新实例。 DOM2 Style 模块定义了如何操作元素的样式信息。  每个元素都有一个关联的style 对象，可用于确定和修改元素特定的样式。  要确定元素的计算样式，包括应用到元素身上的所有CSS 规则，可以使用getComputedStyle() 方法。  通过document.styleSheets 集合可以访问文档上所有的样式表。 DOM2 Traversal and Range 模块定义了与DOM结构交互的不同方式。  NodeIterator 和TreeWalker 可以对DOM树执行深度优先的遍历。  NodeIterator 接口很简单，每次只能向前和向后移动一步。TreeWalker 除了支持同样的行 为，还支持在DOM 结构的所有方向移动，包括父节点、同胞节点和子节点。  范围是选择DOM结构中特定部分并进行操作的一种方式。  通过范围的选区可以在保持文档结构完好的同时从文档中移除内容，也可复制文档中相应的部分。