详解Javascript中DOM的范围

什么是DOM范围

在Javascript中，DOM（Document Object Model）是指用来描述HTML文档结构的树形结构模型。而DOM范围则是指在Javascript中，我们可以对DOM树进行操作的范围。

一个DOM范围由以下几个组成部分：

1. 起始边界点（start boundary point）：范围的开始位置，通常是一个节点或者节点的某个位置
2. 终止边界点（end boundary point）：范围的结束位置，通常是一个节点或者节点的某个位置
3. 范围选区（range）：起始边界点和终止边界点之间的节点或文本内容组成的一段范围，类似于选中的一段文本或者要操作的元素

创建DOM范围

要创建一个DOM范围，可以通过Range对象的API进行操作。

// 创建一个空的范围
const range = new Range();

// 设置范围的起始边界点
range.setStart(startNode, startOffset);

// 设置范围的终止边界点
range.setEnd(endNode, endOffset);

其中，startNode和endNode都是节点对象，startOffset和endOffset则是节点的位置偏移量。需要注意的是，startNode和endNode必须处于同一个DOM树中。

我们还可以使用selectNode和selectNodeContents方法来设置范围的起始和结束边界点。selectNode会把整个节点作为范围，而selectNodeContents则会把节点内部的内容作为范围。

以下是一个示例，创建一个包含指定元素的范围：

<div id="content">
  <p>这是一段文本<a href="#">链接</a></p>
</div>

const content = document.getElementById('content');
const range = new Range();
range.selectNodeContents(content);

操作DOM范围

创建好DOM范围之后，我们就可以对范围内的内容进行操作了。以下是常用的操作方法：

1. 获取范围内的文本内容

const content = range.toString();

2. 获取范围内的节点

const elements = range.cloneContents().children;

3. 在范围内插入新节点

const newNode = document.createElement('span');
newNode.innerText = '新增节点';
range.insertNode(newNode);

4. 删除范围内的节点

range.deleteContents();

5. 替换范围内的节点

const newNode = document.createElement('span');
newNode.innerText = '替换节点';
range.extractContents();
range.insertNode(newNode);

示例

以下是一个实际应用的示例，我们要把页面中所有的特定单词加上链接：

<div id="content">
  <p>这是一段含有特定单词的文本，包括 word1，word2 和 word3。</p>
</div>

const content = document.getElementById('content');
const range = new Range();
range.selectNodeContents(content);

// 把特定的单词加上链接
const words = ['word1', 'word2', 'word3'];
for (const word of words) {
  const wordRegex = new RegExp(`(${word})`, 'g');
  let match = null;
  while (match = wordRegex.exec(range.toString())) {
    const startOffset = match.index;
    const endOffset = match.index + match[0].length;
    const newLink = document.createElement('a');
    newLink.href = `http://example.com/${word}`;
    newLink.innerText = word;
    const cloneRange = range.cloneRange();
    cloneRange.setStart(range.startContainer, startOffset);
    cloneRange.setEnd(range.startContainer, endOffset);
    cloneRange.deleteContents();
    cloneRange.insertNode(newLink);
    range.setStart(cloneRange.startContainer, cloneRange.startOffset);
    range.setEnd(cloneRange.endContainer, cloneRange.endOffset);
  }
}

以上代码会将范围内的指定单词加上链接，最终页面会变成这样：

<div id="content">
  <p>这是一段含有特定单词的文本，包括 <a href="http://example.com/word1">word1</a>，<a href="http://example.com/word2">word2</a> 和 <a href="http://example.com/word3">word3</a>。</p>
</div>

通过以上示例，我们可以看到DOM范围的灵活性和强大的操作能力。