Javascript标准DOM Range操作全集

JavaScript标准DOM Range操作是指通过JavaScript代码对网页上指定的文本片段（如文本块或元素节点）进行操作，包括选取、添加、替换、删除等操作。这篇攻略将会介绍针对DOM Range对象的常见操作，为读者提供DOM Range的完整使用指南。

什么是DOM Range

DOM Range是一个用于描述文档中某个范围（即一段连续的文本或一个元素）的对象。它在文本选择、编辑器和文本到HTML输出等方面非常有用。一个DOM Range被看作是一个文档片段的前半部分（起始节点）和后半部分（结束节点）之间的文本序列。在操作DOM Range时，通过设置起始节点和结束节点，可以对DOM范围进行选择、添加、删除、替换等多种操作。

DOM Range属性

• startContainer、startOffset：DOM范围的起始节点和在起始节点中的位置；

• endContainer、endOffset：DOM范围的结束节点和在结束节点中的位置；

• collapsed：DOM范围是否是空的（即选择的范围是否为0）；

• commonAncestorContainer：DOM范围的公共祖先节点。

DOM Range方法

初始化DOM范围

Range对象提供了3种初始化方式：

• document.createRange()：创建一个范围对象实例；

• var range = element.createRange()：创建一个范围对象实例，该对象与指定元素关联；

• var range = document.createRange(); range.selectNode(element);：创建一个范围对象实例，并将其设置为一个节点的选择范围。

选择DOM范围

• range.selectNode(element)：将DOM范围的选中范围设置为指定元素的全部内容，包括元素中所有的子元素和文本节点。

• range.selectNodeContents(element)：将DOM范围的选中范围设置为指定元素的所有文本节点。

• range.collapse([true|false])：将DOM范围的起始位置或结束位置折叠。如果参数设为true，将会折叠到起始位置；如果参数设为false，将会折叠到结束位置。

获取DOM范围内的属性和文本

• range.startContainer、range.endContainer：获取DOM范围的起始和结束位置的容器（可以是元素或文本节点）。

• range.startOffset、range.endOffset：获取DOM范围的起始和结束位置在其容器节点中的偏移量。

• range.commonAncestorContainer：获取DOM范围的起始和结束节点之间的公共祖先节点。

• range.toString()：获取DOM范围的文本内容。

增加和删除DOM范围的内容

• range.deleteContents()：删除DOM范围的所有内容。

• var cloneRange = range.cloneRange()：复制DOM范围的内容。

• range.extractContents()：将DOM范围的内容移动到一个文档片段中。

• range.insertNode(newNode)：将一个新节点插入到DOM范围内。

以下是两个针对DOM Range操作的示例：

示例1：引用功能实现

文本框内输入一段话，并选中其中一部分，然后点击引用按钮，选中的部分将会以引用的方式插入到文本框中。

<textarea id="myTextarea"></textarea>
<button onclick="quoteSelectedText()">引用</button>

function quoteSelectedText() {
  var textarea = document.getElementById("myTextarea");
  var range = window.getSelection().getRangeAt(0);
  var newElement = document.createElement("blockquote");
  newElement.textContent = range.toString();
  range.deleteContents();
  range.insertNode(newElement);
}

示例2：替换DOM节点

使用DOM范围将HTML代码中的标题改为粗体。

<div id="myDiv">
  <h2>这是一个标题</h2>
  <p>这是一段正文</p>
</div>
<button onclick="replaceTitle()">将标题变为粗体</button>

function replaceTitle() {
  var myDiv = document.getElementById("myDiv");
  var range = document.createRange();
  var h2 = myDiv.getElementsByTagName("h2")[0];
  range.selectNode(h2);
  var newElement = document.createElement("b");
  newElement.textContent = h2.textContent;
  range.deleteContents();
  range.insertNode(newElement);
}

以上是DOM Range操作的完整攻略，希望对您有帮助。