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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: Selection.setBaseAndExtent()
slug: Web/API/Selection/setBaseAndExtent
translation_of: Web/API/Selection/setBaseAndExtent
---
<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
<p><strong><code>setBaseAndExtent()方法是</code></strong>{{domxref("Selection")}}接口用来选中并设置在两个特定的DOM节点中文本选中的范围, 并且选中的任何内容都位于两个节点之间.</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><em>sel</em>.setBaseAndExtent(<em>anchorNode</em>,<em>anchorOffset</em>,<em>focusNode</em>,<em>focusOffset</em>)
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><em><code>anchorNode</code></em></dt>
<dd>锚节点-选中内容的开始节点</dd>
<dt><em><code>anchorOffset</code></em></dt>
<dd>选中范围内起点位置在锚节点下第几个子节点的位置.例如,如果是值为0的话，整个节点都是被选中的. 如果值为1的话，那么至少整个节点至少有一个子节点被选中. 以此类推.</dd>
<dt><em><code>focusNode</code></em></dt>
<dd>焦点节点-选中内容的结尾节点</dd>
<dt><code><em>focusOffset</em></code></dt>
<dd>选中范围内结束位置在焦点节点下第几个子节点的位置.例如,如果是值为0的话，整个节点都是被选中的. 如果值为1的话，那么至少整个节点至少有一个子节点被选中. 以此类推.</dd>
</dl>
<div class="note">
<p><strong>Note</strong>: 如果源代码中<code>焦点节点</code>出现在<code>锚节点</code>之前的话, 这两个将在参数中互换位置, 也就是锚节点变为了焦点节点、焦点节点变为了锚节点. 另外, 这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾,这对于任何可能遵循这规则的键盘命令都是很重要的.例如, <kbd>Shift</kbd> + <kbd>➡︎</kbd> 会使选中状态范围的从开始缩小，而不是在结尾增加.</p>
</div>
<h3 id="返回值">返回值</h3>
<p>Void.</p>
<h3 id="说明">说明</h3>
<p>如果<code>锚偏移值</code>超过了<code>锚节点</code>内部的子节点个数, 或则如果<code>焦点偏移值</code>超过了<code>焦点节点</code>内部的子节点个数, 这个{{domxref("IndexSizeError")}} 选中会被丢弃.</p>
<h2 id="示例">示例</h2>
<p>一个例子, 我们有两个包含多个span的段落, 每一个span包含一个单词. 然后第一个段落作为<code>锚节</code>点并且第二个作为<code>焦点节点</code>.我们还有一个额外的段落插入在两个节点之间.</p>
<p>然后, 这里有两个允许你去设置锚节点和焦点节点的表单输入框 — 它们都有一个默认值为0.</p>
<p>这里还有一个按钮用来点击调用运行包含<code>setBaseAndExtent()</code>方法的函数, 最后输出选中内容到HTML的最底部.</p>
<pre class="brush: html"><h1>setBaseAndExtent example</h1>
<div>
<p class="one"><span>Fish</span><span>Dog</span><span>Cat</span><span>Bird</span></p>
<p>MIDDLE</p>
<p class="two"><span>Car</span><span>Bike</span><span>Boat</span><span>Plane</span></p>
</div>
<div>
<p>
<label for="aOffset">Anchor offset</label>
<input id="aOffset" name="aOffset" type="number" value="0">
</p>
<p>
<label for="fOffset">Focus offset</label>
<input id="fOffset" name="fOffset" type="number" value="0">
</p>
<p><button>Capture selection</button></p>
</div>
<p><strong>Output</strong>: <span class="output"></span></p></pre>
<p>JavaScript像这样:</p>
<pre class="brush: js">var one = document.querySelector('.one');
var two = document.querySelector('.two');
var aOffset = document.getElementById('aOffset');
var fOffset = document.getElementById('fOffset');
var button = document.querySelector('button');
var output = document.querySelector('.output');
var selection;
button.onclick = function() {
try {
selection = document.getSelection();
selection.setBaseAndExtent(one, aOffset.value, two, fOffset.value);
var text = selection.toString();
output.textContent = text;
} catch(e) {
output.textContent = e.message;
}
}</pre>
<p>在下面在线运行实例, 设置不同的偏移值去观察它怎么去影响选中内容的.</p>
<p>{{ EmbedLiveSample('Examples', '100%', 370) }}</p>
<div class="note">
<p><strong>Note</strong>: 实例在这里 <a href="https://github.com/chrisdavidmills/selection-api-examples/blob/master/setBaseAndExtent.html">example on GitHub</a> (<a href="https://chrisdavidmills.github.io/selection-api-examples/setBaseAndExtent.html">see it live also</a>.)</p>
</div>
<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('Selection API', '#dom-selection-setbaseandextent', 'Selection.setBaseAndExtent()')}}</td>
<td>{{Spec2('Selection API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器支持">浏览器支持</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(53)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table" style="height: 57px; width: 891px;">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(53)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{domxref("Selection")}}</li>
</ul>
|
