1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
---
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>
|
