HTML DOM 范围折叠属性

HTML DOM（文档对象模型）是用于访问和操作 HTML 文档的标准 API。范围折叠属性是其中的一个属性，用于操作选择的文本范围。

范围折叠属性的用途

范围折叠属性通常用于在文本范围中插入新的 HTML 元素或修改已选中的元素。使用范围折叠属性，可以将一个范围折叠成一个点，然后在该点插入或修改文本或元素。

const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
range.collapse();

在上述代码中，range.collapse() 方法将范围折叠成了一个点。

范围折叠属性的语法

range.collapse([toStart]);

参数 toStart 是可选的，如果设置为 true，则折叠范围到其起始点，否则折叠到其终止点。

范围折叠属性的示例

以下示例演示如何使用范围折叠属性将文本范围折叠成一个点，然后插入新的文本。

const range = document.createRange();
const startNode = document.getElementById('start');
const endNode = document.getElementById('end');
range.setStart(startNode, 1);
range.setEnd(endNode, 2);
range.collapse();
range.insertNode(document.createTextNode('Hello World!'));

在上述代码中，首先使用 document.createRange() 方法创建了一个范围对象。然后，使用 setStart() 和 setEnd() 方法将范围设置为从 ID 为 start 的元素的第二个字符到 ID 为 end 的元素的第三个字符。最后，使用 collapse() 将范围折叠为一个点，在该点插入了新的文本 'Hello World!'。

总结

范围折叠属性是 HTML DOM 中一个重要的属性，用于操作选择的文本范围。它可以将一个范围折叠成一个点，以便于插入或修改文本或元素。在实际开发中，可以结合其他 HTML DOM 属性和方法来实现更加强大和灵活的功能。