---
title: Range
slug: Web/API/Range
tags:
  - API
  - DOM
  - Range
translation_of: Web/API/Range
---
<p>{{ ApiRef() }}</p>

<p><strong><code>Range</code></strong> 接口表示一个包含节点与文本节点的一部分的文档片段。</p>

<p>可以用 {{domxref("Document")}} 对象的 {{domxref("Document.createRange")}} 方法创建 Range，也可以用 {{domxref("Selection")}} 对象的 {{domxref("Selection/getRangeAt", "getRangeAt")}} 方法获取 Range。另外，还可以通过 {{domxref("Document")}} 对象的构造函数 {{domxref("Range.Range()", "Range()")}} 来得到 Range。</p>

<h2 id="Properties" name="Properties">属性</h2>

<dl>
 <dt>{{domxref("Range.collapsed")}} {{readonlyInline}}</dt>
 <dd>返回一个表示 <code>Range</code> 的起始位置和终止位置是否相同的{{domxref("Boolean", "布尔值")}}。</dd>
 <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt>
 <dd>返回完整包含 <code>startContainer</code> 和 <code>endContainer</code> 的、最深一级的{{ domxref("Node", "节点") }}。</dd>
 <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt>
 <dd>返回包含 <code>Range</code> 终点的{{ domxref("Node", "节点") }}。</dd>
 <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt>
 <dd>返回一个表示 <code>Range</code> 终点在 <code>endContainer</code> 中的位置的数字。</dd>
 <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt>
 <dd>返回包含 <code>Range</code> 开始的{{ domxref("Node", "节点") }}。</dd>
 <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt>
 <dd>返回一个表示 <code>Range</code> 起点在 <code>startContainer</code> 中的位置的数字。</dd>
</dl>

<h2 id="构造器">构造器</h2>

<dl>
 <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt>
 <dd>返回一个以全局（global） {{domxref("Document")}} 作为起点与终点的 <code>Range</code> 对象。</dd>
</dl>

<h2 id="方法">方法</h2>

<p class="syntaxbox"><em>该接口没有继承的方法。</em></p>

<h3 id="定位方法">定位方法</h3>

<dl>
 <dt>{{ domxref("Range.setStart()")}}</dt>
 <dd>设置 <code>Range</code> 的起点。</dd>
 <dt>{{ domxref("Range.setEnd()")}}</dt>
 <dd>设置 <code>Range</code> 的终点。</dd>
 <dt>{{ domxref("Range.setStartBefore()")}}</dt>
 <dd>以其它{{ domxref("Node", "节点") }}为基准，设置 <code>Range</code> 的起点。</dd>
 <dt>{{ domxref("Range.setStartAfter()")}}</dt>
 <dd>以其它{{ domxref("Node", "节点") }}为基准，设置 <code>Range</code> 的起点。</dd>
 <dt>{{ domxref("Range.setEndBefore()")}}</dt>
 <dd>以其它{{ domxref("Node", "节点") }}为基准，设置 <code>Range</code> 的终点。</dd>
 <dt>{{ domxref("Range.setEndAfter()")}}</dt>
 <dd>以其它{{ domxref("Node", "节点") }}为基准，设置 <code>Range</code> 的终点。</dd>
 <dt>{{ domxref("Range.selectNode()")}}</dt>
 <dd>使 <code>Range</code> 包含某个{{ domxref("Node", "节点") }}及其内容。</dd>
 <dt>{{ domxref("Range.selectNodeContents()")}}</dt>
 <dd>使 <code>Range</code> 包含某个{{ domxref("Node", "节点") }}的内容。</dd>
 <dt>{{ domxref("Range.collapse()")}}</dt>
 <dd>将 <code>Range</code> 折叠至其端点（boundary points，起止点，指起点或终点，下同）之一。</dd>
</dl>

<h3 id="编辑方法">编辑方法</h3>

<p class="syntaxbox"><em>通过以下方法，可以从 <code>Range</code> 中获得节点，改变 <code>Range</code> 的内容。</em></p>

<dl>
 <dt>{{ domxref("Range.cloneContents()")}}</dt>
 <dd>返回一个包含 <code>Range</code> 中所有节点的{{ domxref("DocumentFragment", "文档片段") }}。</dd>
 <dt>{{ domxref("Range.deleteContents()")}}</dt>
 <dd>从{{ domxref("Document", "文档") }}中移除 <code>Range</code> 包含的内容。</dd>
 <dt>{{ domxref("Range.extractContents()")}}</dt>
 <dd>把 <code>Range</code> 的内容从文档树移动到一个{{ domxref("DocumentFragment", "文档片段") }}中。</dd>
 <dt>{{ domxref("Range.insertNode()")}}</dt>
 <dd>在 <code>Range</code> 的起点处插入一个{{ domxref("Node", "节点") }}。</dd>
 <dt>{{ domxref("Range.surroundContents()")}}</dt>
 <dd>将 <code>Range</code> 的内容移动到一个新的{{ domxref("Node", "节点") }}中。</dd>
</dl>

<h3 id="其他方法">其他方法</h3>

<dl>
 <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt>
 <dd>比较两个 <code>Range</code> 的端点。</dd>
 <dt>{{ domxref("Range.cloneRange()")}}</dt>
 <dd>返回拥有和原 <code>Range</code> 相同的端点的克隆 <code>Range</code> 对象。</dd>
 <dt>{{ domxref("Range.detach()")}}</dt>
 <dd>将 <code>Range</code> 从使用状态中释放，改善性能。</dd>
 <dt>{{ domxref("Range.toString()")}}</dt>
 <dd>把 <code>Range</code> 的内容作为字符串返回。</dd>
</dl>

<h3 id="Gecko_方法">Gecko 方法</h3>

<p><em>下面的是 Mozilla 独有的、不被包含在 W3C DOM 标准中的 </em><code>Range</code><em> 方法。</em></p>

<dl>
 <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt>
 <dd>返回一个常量，表示{{ domxref("Node", "节点") }}是否在 <code>Range</code> 的前、后、中、外。</dd>
 <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt>
 <dd>返回 -1、0、1，分别表示指定点（point）位于 <code>Range</code> 的前、中、后。</dd>
 <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt>
 <dd>解析指定字符串（格式为 XML 或 HTML），并返回一个{{ domxref("DocumentFragment", "文档片段") }}。</dd>
 <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt>
 <dd>返回单个 {{ domxref("ClientRect") }} 对象，which bounds the entire contents of the<code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd>
 <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt>
 <dd>返回一个 {{ domxref("ClientRect") }} 对象的列表，that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd>
 <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt>
 <dd>返回{{domxref("Boolean", "布尔值")}}，表示指定{{ domxref("Node", "节点") }}是否横断 <code>Range</code>。</dd>
 <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt>
 <dd>返回{{domxref("Boolean", "布尔值")}}，表示指定点是否位于 <code>Range</code> 之中。</dd>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br>
    Made the second parameter of <code>collapse()</code> optional.<br>
    Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>,  and <code>intersectsNode()</code>.<br>
    Added the constructor <code>Range()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
   <td>{{Spec2('DOM Parsing')}}</td>
   <td>Added the method <code>createContextualFragment()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td>
   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.Range")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/Document_Object_Model">DOM 接口索引</a></li>
</ul>