--- 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>