DOM中的范围 createRange() 的详解

10 min read

createRange()方法是DOM API的一部分，用于创建一个范围对象，该对象表示页面中的文本范围。通过调用该方法，可以获得一个Range对象，该对象表示当前文档中的某个范围。以下是关于该方法的一些详解：

语法

range = document.createRange();

返回值

返回一个Range对象（范围对象），该对象表示当前文档中的某个范围。

说明

  • createRange()必须是在一个已经加载的文档上调用才有意义。
  • 一旦创建了一个范围对象，就可以通过多个方法来操纵范围，例如setStart()、setEnd()和selectNode()等。
  • 范围对象中有一些常用属性和方法，如startContainer、endContainer、startOffset和endOffset等。
  • createRange()方法常常与其他DOM API方法一起使用，例如document.getSelection()或document.elementFromPoint()。

示例

以下是一个通过createRange()方法创建并实现一些操作的范围对象的示例：

const range = document.createRange();
range.setStart(document.getElementsByTagName('p')[0], 1);
range.setEnd(document.getElementsByTagName('p')[1], 3);

在此示例中，我们使用createRange()方法创建了一个空范围对象，并通过setStart()和setEnd()方法设置了范围对象的起始和结束位置。在此范围内，包括了文档中两个段落的一部分。然后，可以使用其他方法来操作该范围对象，例如在文档中插入文本，高亮范围内的文本，或选择特定节点等。