javascript基础学习系列四百四十二：范围折叠

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/136068392

折叠范围可以使用 collapse()方法，这个方法接收一个参数：布尔值，表示折叠到范围哪一端。
true 表示折叠到起点，false 表示折叠到终点。要确定范围是否已经被折叠，可以检测范围的 collapsed属性：

console.log(range.collapsed); // 输出 true

测试范围是否被折叠，能够帮助确定范围中的两个节点是否相邻。例如有以下 HTML 代码：

id="p2">Paragraph 2</p>

如果事先并不知道标记的结构（比如自动生成的标记），则可以像下面这样创建一个范围：

 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 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()默认返回的值。
复制范围
调用范围的 cloneRange()方法可以复制范围。这个方法会创建调用它的范围的副本：

新范围包含与原始范围一样的属性，修改其边界点不会影响原始范围。
清理
在使用完范围之后，最好调用 detach()方法把范围从创建它的文档中剥离。调用 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 结构中特定部分并进行操作的一种方式。
 通过范围的选区可以在保持文档结构完好的同时从文档中移除内容，也可复制文档中相应的部分。