initial commit

22 files changed, 2116 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/selection/addrange/index.html b/files/zh-cn/web/api/selection/addrange/index.html
new file mode 100644
index 0000000000..3c0f54a082
--- /dev/null
+++ b/files/zh-cn/web/api/selection/addrange/index.html
@@ -0,0 +1,68 @@
+---
+title: Selection.addRange()
+slug: Web/API/Selection/addRange
+translation_of: Web/API/Selection/addRange
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概述</h2>
+
+<p>向选区（{{domxref("Selection")}}）中添加一个区域（{{domxref("Range")}}）。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.addRange(<em>range</em>)</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<dl>
+ <dt><em><code>range</code></em></dt>
+ <dd>一个区域（{{ domxref("Range") }}）对象将被增加到选区（{{ domxref("Selection") }}）当中。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例子</h2>
+
+<pre class="brush:js">/* 在一个HTML文档中选中所有<strong>加粗</strong>的文本。 */
+
+var strongs = document.getElementsByTagName("strong");
+var s = window.getSelection();
+
+if(s.rangeCount &gt; 0) s.removeAllRanges();
+
+for(var i = 0; i &lt; strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+}</pre>
+
+<h2 id="规范" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-addrange', 'Selection.addRange()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-addRange-void-Range-range', 'Selection.addRange()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{Compat("api.Selection.addRange")}}</p>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}，此方法所属接口。</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/anchornode/index.html b/files/zh-cn/web/api/selection/anchornode/index.html
new file mode 100644
index 0000000000..6fd53e9b1b
--- /dev/null
+++ b/files/zh-cn/web/api/selection/anchornode/index.html
@@ -0,0 +1,98 @@
+---
+title: Selection.anchorNode
+slug: Web/API/Selection/anchorNode
+translation_of: Web/API/Selection/anchorNode
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概述</h2>
+
+<p><strong><code>Selection.anchorNode </code></strong><code>只读属性</code>返回选区开始位置所属的节点（{{domxref("Node")}}）。</p>
+
+<h2 id="Syntax" name="Syntax">用法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.anchorNode</pre>
+
+<h2 id="Notes" name="Notes">注意</h2>
+
+<p>用户可能从左至右进行框选（沿着文字顺序）或者从右至左框选（沿着文字顺序的反方向）。锚点位于用户开始选择的位置。可以通过按住Shift和方向键来得知锚点所在的位置。选区的锚点是不会移动的，但是选区的焦点、选区其他的结束位置（多个选区，译者注）可以移动。</p>
+
+<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('HTML Editing', '#dom-selection-anchornode', 'Selection.anchorNode')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '##widl-Selection-anchorNode', 'Selection.anchorNode')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, 此属性所属接口。</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/anchoroffset/index.html b/files/zh-cn/web/api/selection/anchoroffset/index.html
new file mode 100644
index 0000000000..04c385181b
--- /dev/null
+++ b/files/zh-cn/web/api/selection/anchoroffset/index.html
@@ -0,0 +1,94 @@
+---
+title: Selection.anchorOffset
+slug: Web/API/Selection/anchorOffset
+translation_of: Web/API/Selection/anchorOffset
+---
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+
+<p>只读属性，返回选区的锚节点（ {{domxref("Selection.anchorNode")}}）起点偏移量的数字。返回值从零开始计数，如果选区从锚节点（{{domxref("Selection.anchorNode")}}）的第一个字符开始，返回值为0。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>number</em> =<em> sel</em>.anchorOffset</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-anchoroffset', 'Selection.anchorOffset')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-anchorOffset', 'Selection.anchorOffset')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">相关内容</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, the interface it belongs to.</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/collapse/index.html b/files/zh-cn/web/api/selection/collapse/index.html
new file mode 100644
index 0000000000..80a526f1fb
--- /dev/null
+++ b/files/zh-cn/web/api/selection/collapse/index.html
@@ -0,0 +1,71 @@
+---
+title: Selection.collapse()
+slug: Web/API/Selection/collapse
+tags:
+  - API
+  - HTML Editing
+  - Method
+  - Selection
+translation_of: Web/API/Selection/collapse
+---
+<div>{{ApiRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p> <strong><code>Selection.collapse()</code></strong> 方法可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面，则光标会在该处闪烁。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>sel</var>.collapse(<var>parentNode</var>, <var>offset</var>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em><code>parentNode</code></em></dt>
+ <dd>光标落在的目标节点。</dd>
+</dl>
+
+<dl>
+ <dt><em><code>offset</code></em> {{optional_inline}}</dt>
+ <dd>落在节点的偏移量。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">/* 将光标收起到文档body的开头 */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+</pre>
+
+<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', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{Compat("api.Selection.collapse")}}</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="相关连接">相关连接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, 本方法所属的接口.</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/collapsetoend/index.html b/files/zh-cn/web/api/selection/collapsetoend/index.html
new file mode 100644
index 0000000000..a0c08c8da9
--- /dev/null
+++ b/files/zh-cn/web/api/selection/collapsetoend/index.html
@@ -0,0 +1,97 @@
+---
+title: Selection.collapseToEnd()
+slug: Web/API/Selection/collapseToEnd
+translation_of: Web/API/Selection/collapseToEnd
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<p><strong><code>Selection.collapseToEnd()</code></strong> 方法的作用是取消当前选区，并把光标定位在原选区的最末尾处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.collapseToEnd()
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<p>无</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-collapsetoend', 'Selection.collapseToEnd()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-collapseToEnd-void', 'Selection.collapseToEnd()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/collapsetostart/index.html b/files/zh-cn/web/api/selection/collapsetostart/index.html
new file mode 100644
index 0000000000..c231a4c17e
--- /dev/null
+++ b/files/zh-cn/web/api/selection/collapsetostart/index.html
@@ -0,0 +1,51 @@
+---
+title: Selection.collapseToStart()
+slug: Web/API/Selection/collapseToStart
+tags:
+  - API
+  - Selection
+  - 参考
+  - 方法
+translation_of: Web/API/Selection/collapseToStart
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<p><strong><code>Selection.collapseToStart()</code></strong> 方法的作用是取消当前选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var><var>sel</var></var>.collapseToStart()
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<p><em>无。</em></p>
+
+<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-collapsetostart', 'Selection.collapseToStart()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Selection.collapseToStart")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>此方法所属的接口，{{domxref("Selection")}}。</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/containsnode/index.html b/files/zh-cn/web/api/selection/containsnode/index.html
new file mode 100644
index 0000000000..7b7b83160e
--- /dev/null
+++ b/files/zh-cn/web/api/selection/containsnode/index.html
@@ -0,0 +1,110 @@
+---
+title: Selection.containsNode()
+slug: Web/API/Selection/containsNode
+translation_of: Web/API/Selection/containsNode
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<p><strong><code>Selection.containsNode()</code></strong> 判断指定的节点是否包含在Selection中(是否被选中).</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.containsNode(<em>aNode</em>,<em>aPartlyContained</em>)
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em><code>aNode</code></em></dt>
+ <dd>用于判断是否包含在Selection中的那个节点</dd>
+ <dt><em><code>aPartlyContained</code></em></dt>
+ <dd>当此参数为<code>true时</code>, 当<code>selection包含节点aNode的一部分或全部时，containsNode()返回true</code>.<br>
+ 当此参数为<code>false时</code>, 只有当selection完全包含节点aNode时，<code>containsNode()</code> 才返回true.</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="eval"> /* 检查body中是否有节点被选中 */
+ console.log(window.getSelection().containsNode(document.body, true));</pre>
+
+<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('HTML Editing', '#dom-selection-containsNode', 'Selection.containsNode')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-containsNode-boolean-Node-node-boolean-allowPartialContainment', 'Selection.containsNode()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基础特性支持</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}[1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 57px; width: 891px;">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基础特性支持</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2)}}[1]</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在Firefox 35之前版本的浏览器中, 此方法不会在aNode为null时抛出异常.</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, Selection接口规范.</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/extend/index.html b/files/zh-cn/web/api/selection/extend/index.html
new file mode 100644
index 0000000000..9482371b79
--- /dev/null
+++ b/files/zh-cn/web/api/selection/extend/index.html
@@ -0,0 +1,130 @@
+---
+title: Selection.extend()
+slug: Web/API/Selection/extend
+translation_of: Web/API/Selection/extend
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p> <strong><code>Selection.extend()</code></strong> 方法移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点，不管方向。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.extend(<em>node</em>, <em>offset</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>焦点会被移至此节点内。</dd>
+ <dt><em>offset</em> {{optional_inline}}</dt>
+ <dd>焦点会被移至 <code>node</code> 内的偏移位置。如果没有指定，使用 <code>0</code> 作为默认值。</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-extend', 'Selection.extend()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-extend-void-Node-node-unsigned-long-offset', 'Selection.extend()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</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>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td><code>offset</code> parameter is optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>offset</code> parameter is optional</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, 此方法所属接口。</li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/zh-cn/web/api/selection/focusnode/index.html b/files/zh-cn/web/api/selection/focusnode/index.html
new file mode 100644
index 0000000000..be2aecd57b
--- /dev/null
+++ b/files/zh-cn/web/api/selection/focusnode/index.html
@@ -0,0 +1,95 @@
+---
+title: Selection.focusNode
+slug: Web/API/Selection/focusNode
+translation_of: Web/API/Selection/focusNode
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<p><strong><code>Selection.focusNode</code></strong><code>是只读的</code><strong><code>，</code></strong><font><font>返回所选内容的结束位置部分所属的节点</font></font>.</p>
+
+<p>用户可能会从左到右(按文字方向) 或从右到左 (按文字相反方向)进行选择. focusNode就是用户选择时最后停下来所处的元素节点. 当你同时按下shift键和任何一个方向键来改变选择时，你就能看到：选择的结束位置在移动, 但是选择的锚点-起始位置不会改变.</p>
+
+<h2 id="Syntax" name="Syntax"><font><font>语法</font></font></h2>
+
+<pre class="syntaxbox"><em>node</em> =<em> sel</em>.focusNode
+</pre>
+
+<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('HTML Editing', '#dom-selection-focusnode', 'Selection.focusNode')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-focusNode', 'Selection.focusNode')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基础特性支持</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基础特性支持</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">参考</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, Selection接口规范.</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/focusoffset/index.html b/files/zh-cn/web/api/selection/focusoffset/index.html
new file mode 100644
index 0000000000..53e346609b
--- /dev/null
+++ b/files/zh-cn/web/api/selection/focusoffset/index.html
@@ -0,0 +1,102 @@
+---
+title: Selection.focusOffset
+slug: Web/API/Selection/focusOffset
+tags:
+  - HTML编辑
+  - 只读
+  - 属性
+  - 选区
+translation_of: Web/API/Selection/focusOffset
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p>只读属性<strong><code>,</code></strong> 返回选区终点（鼠标松开瞬间所记录的那个点）在焦点（{{domxref("Selection.focusNode")}}）中的偏移量。返回值从零开始计数，如果选区（{{domxref("Selection")}}）在焦点（{{domxref("Selection.focusNode")}}）的第一个字符前结束，返回值为0。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>offset</em> =<em> sel</em>.focusOffset
+</pre>
+
+<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('HTML Editing', '#dom-selection-focusOffset', 'Selection.focusOffset')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-focusOffset', 'Selection.focusOffset')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>最低支持版本</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>最低支持版本</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, 这个属性所属的接口。</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/getrangeat/index.html b/files/zh-cn/web/api/selection/getrangeat/index.html
new file mode 100644
index 0000000000..0271633685
--- /dev/null
+++ b/files/zh-cn/web/api/selection/getrangeat/index.html
@@ -0,0 +1,65 @@
+---
+title: Selection.getRangeAt()
+slug: Web/API/Selection/getRangeAt
+translation_of: Web/API/Selection/getRangeAt
+---
+<div>{{APIRef}}</div>
+
+
+<div><strong>概述</strong></div>
+
+
+<p>返回一个包含当前选区内容的区域对象。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>range</em> = <em>sel</em>.getRangeAt(<em>index</em>)
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em><code>range</code></em></dt>
+ <dd> 将返回 <a href="/en-US/docs/DOM/range" title="DOM/range">range</a> 对象。</dd>
+ <dt><em><code>index</code></em></dt>
+ <dd>该参数指定需要被处理的子集编号（从零开始计数）。如果该数值被错误的赋予了大于或等于 <a href="/en-US/docs/DOM/Selection/rangeCount" title="DOM/Selection/rangeCount">rangeCount</a> 结果的数字，将会产生错误。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush:js">let ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i &lt; sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* 在 ranges 数组的每一个元素都是一个 range 对象，
+<span> * 对象的内容是当前选区中的一个。 */</span></pre>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-getrangeat', 'Selection.getRangeAt()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Selection.getRangeAt")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL_Tutorial/Tree_Selection" title="XUL_Tutorial/Tree_Selection">Tree Selection</a> (for the <code>getRangeAt()</code> method on the <code>nsITreeSelection</code> interface)</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/index.html b/files/zh-cn/web/api/selection/index.html
new file mode 100644
index 0000000000..01e7e99ca7
--- /dev/null
+++ b/files/zh-cn/web/api/selection/index.html
@@ -0,0 +1,211 @@
+---
+title: Selection
+slug: Web/API/Selection
+tags:
+  - DOM
+  - Gecko
+  - NeedsTechnicalReview
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Selection
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<p><code>Selection</code> 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的 Selection 对象，请调用 {{domxref("window.getSelection()")}}。</p>
+
+<p>一般来说，插入光标的位置可通过 Selection 获取，这时它被标记为 <code>Collapsed</code>，这表示选区被压缩至一点，即光标位置。但要注意它与 <code>focus</code> 事件或 {{domxref("Document.activeElement")}} 等的值没有必然联系。</p>
+
+<p>用户可能从左到右（与文档方向相同）选择文本或从右到左（与文档方向相反）选择文本。<code>anchor</code> 指向用户开始选择的地方，而 <code>focus</code> 指向用户结束选择的地方。如果你使用鼠标选择文本的话，anchor 就指向你按下鼠标键的地方，而 focus 就指向你松开鼠标键的地方。anchor 和 focus 的概念不能与选区的起始位置和终止位置混淆，因为 anchor 指向的位置可能在 focus 指向的位置的前面，也可能在 focus 指向位置的后面，这取决于你选择文本时鼠标移动的方向（也就是按下鼠标键和松开鼠标键的位置）。</p>
+
+<p>Selection 对象所对应的是用户所选择的 {{domxref("range","ranges")}} （区域），俗称拖蓝。默认情况下，该函数只针对一个区域，我们可以这样使用这个函数：</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:js">var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);</pre>
+</div>
+
+<ul>
+ <li><code>selObj</code> 被赋予一个 Selection对象</li>
+ <li>
+  <p><code>range</code> 被赋予一个 <a href="/en-US/docs/DOM/range" title="DOM/Range">Range</a> 对象</p>
+ </li>
+</ul>
+
+<p>调用 {{domxref("Selection.toString()","")}} 方法会返回被选中区域中的<strong>纯文本</strong>。要求变量为字符串的函数会自动对对象进行该处理，例如：</p>
+
+<pre class="brush: js">var selObj = window.getSelection();
+window.alert(selObj); </pre>
+
+<h2 id="Glossary" name="Glossary">术语表</h2>
+
+<p>本页面使用的其他关键词汇：</p>
+
+<dl>
+ <dt>锚点 (anchor)</dt>
+ <dd>锚指的是一个选区的起始点（不同于HTML中的锚点链接，译者注）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。</dd>
+ <dt>焦点 (focus)</dt>
+ <dd>选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。</dd>
+ <dt>范围 (range)</dt>
+ <dd>范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围（例如当用户按下Control按键并框选多个区域时，Chrome中禁止了这个操作，译者注）。“范围”会被作为 {{domxref("Range")}} 对象返回。Range对象也能通过DOM创建、增加、删减。</dd>
+ <dt>可编辑元素 (editing host)</dt>
+ <dd>一个用户可编辑的元素（例如一个使用 {{htmlattrxref("contenteditable")}} 的HTML元素，或是在启用了 {{domxref("Document.designMode", "designMode")}} 的 {{domxref("Document")}} 的子元素）。详见 <a href="#Selection_API_在可编辑元素焦点更改方面的行为">开发者笔记</a>。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">属性</h2>
+
+<dl>
+ <dt>{{domxref("Selection/anchorNode","anchorNode")}}{{ReadOnlyInline}}</dt>
+ <dd>返回该选区起点所在的<span style="line-height: 1.5;">节点</span><span style="line-height: 1.5;">（{{domxref("Node")}}</span><span style="line-height: 1.5;">）。</span></dd>
+ <dt>{{domxref("Selection/anchorOffset","anchorOffset")}}{{ReadOnlyInline}}</dt>
+ <dd>返回一个数字，其表示的是选区起点在 {{domxref("Selection/anchorNode","anchorNode")}} 中的位置偏移量。
+ <ol>
+  <li>如果 <code>anchorNode</code> 是文本节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）。</li>
+  <li>如果 <code>anchorNode</code> 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 <code>anchorNode</code> 的子节点)</li>
+ </ol>
+ </dd>
+ <dt>{{domxref("Selection/focusNode","focusNode")}}{{ReadOnlyInline}}</dt>
+ <dd>返回该选区终点所在的节点。</dd>
+ <dt>{{domxref("Selection/focusOffset","focusOffset")}}{{ReadOnlyInline}}</dt>
+ <dd>返回一个数字，其表示的是选区终点在 {{domxref("Selection/focusNode","focusNode")}} 中的位置偏移量。
+ <ol>
+  <li>如果 <code>focusNode</code> 是文本节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。</li>
+  <li>如果 <code>focusNode</code> 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。</li>
+ </ol>
+ </dd>
+ <dt>{{domxref("Selection/isCollapsed","isCollapsed")}}{{ReadOnlyInline}}</dt>
+ <dd>返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。</dd>
+ <dt>{{domxref("Selection/rangeCount","rangeCount")}}{{ReadOnlyInline}}</dt>
+ <dd>返回该选区所包含的连续范围的数量。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<dl>
+ <dt>{{domxref("Selection/getRangeAt","getRangeAt")}}</dt>
+ <dd>返回选区包含的指定区域（{{domxref("Range")}}）的<strong>引用</strong>。</dd>
+ <dt>{{domxref("Selection/collapse","collapse")}}</dt>
+ <dd>将当前的选区折叠为一个点。</dd>
+ <dt>{{domxref("Selection/extend","extend")}}</dt>
+ <dd>将选区的焦点移动到一个特定的位置。</dd>
+ <dt>{{domxref("Selection/modify","modify")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>修改当前的选区。</dd>
+ <dt>{{domxref("Selection/collapseToStart","collapseToStart")}}</dt>
+ <dd>将当前的选区折叠到起始点。</dd>
+ <dt>{{domxref("Selection/collapseToEnd","collapseToEnd")}}</dt>
+ <dd>将当前的选区折叠到最末尾的一个点。</dd>
+ <dt>{{domxref("Selection/selectAllChildren","selectAllChildren")}}</dt>
+ <dd>将某一指定节点的子节点框入选区。</dd>
+ <dt>{{domxref("Selection/addRange","addRange")}}</dt>
+ <dd>一个区域（{{domxref("Range")}}）对象将被加入选区。</dd>
+ <dt>{{domxref("Selection/removeRange","removeRange")}}</dt>
+ <dd>从选区中移除一个区域。</dd>
+ <dt>{{domxref("Selection/removeAllRanges","removeAllRanges")}}</dt>
+ <dd>将所有的区域都从选区中移除。</dd>
+ <dt>{{domxref("Selection/deleteFromDocument","deleteFromDocument")}}</dt>
+ <dd>从页面中删除选区中的内容。</dd>
+ <dt>{{domxref("Selection/selectionLanguageChange","selectionLanguageChange")}}</dt>
+ <dd>当键盘的朝向发生改变后修改指针的Bidi优先级。</dd>
+ <dt>{{domxref("Selection/toString","toString")}}</dt>
+ <dd>返回当前选区的纯文本内容。</dd>
+ <dt>{{domxref("Selection/containsNode","containsNode")}}</dt>
+ <dd>判断某一个 {{domxref("Node")}} 是否为当前选区的一部分。</dd>
+</dl>
+
+<h2 id="开发者笔记">开发者笔记</h2>
+
+<h3 id="选区的字符串表示">选区的字符串表示</h3>
+
+<p>调用 {{DOMxRef("Selection.toString()")}} 方法返回包含在选区内的文本，例如：</p>
+
+<pre class="brush: js">var selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<p>注意，使用选择对象作为 <code>window.alert</code> 的参数将调用对象的 <code>toString</code> 方法。</p>
+
+<h3 id="选区中的多个区域">选区中的多个区域</h3>
+
+<p>一个 <code>Selection</code> 对象表示用户选择的 {{DOMxRef("Range")}} 的集合。通常，它只包含一个区域，访问方式如下：</p>
+
+<pre class="brush: js"><code>var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);</code></pre>
+
+<ul>
+ <li><code><var>selObj</var></code> 是一个 <code>Selection</code> 对象</li>
+ <li><code><var>range</var></code> 是一个 {{domxref("Range")}} 对象</li>
+</ul>
+
+<p><code>getRangeAt</code> 方法返回对象的<strong>引用</strong>，并且对该函数返回的 <code>Range</code> 对象所运行的函数，会直接作用到选区上，并可能影响用户焦点的情况。</p>
+
+<p>正如 <a href="http://www.w3.org/TR/selection-api/#h_note_15">Selection API 规范</a> 所指出的，Selection API 最初由 Netscape 创建，并允许多个区域（例如，允许用户从 {{HTMLElement("table")}} 中选择列）。但是，Gecko 以外的浏览器没有实现多个区域，而且规范还要求选择的内容始终（仅）具有一个范围（允许多个区域可能引起不必要的兼容性问题，例如同时从多处输入，译者注）。</p>
+
+<h3 id="Selection_及输入焦点">Selection 及输入焦点</h3>
+
+<p>选择和输入焦点（由 {{domxref("Document.activeElement")}} 表示）有一个复杂的关系，该关系因浏览器而异。在跨浏览器兼容的代码中，最好分别处理它们。</p>
+
+<p>Safari和Chrome（与Firefox不同）目前在以编程方式修改 <code>Selection</code> 时会将包含选区的元素作为焦点；这可能在将来会发生变化（请参见 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14383">W3C Bug 14383</a> 和 {{WebKitBug("3869")}}）。</p>
+
+<p>（目前在 WebKit 中，按钮等元素被直接点击不会修改选区，但会将焦点传递，译者注）</p>
+
+<h3 id="Selection_API_在可编辑元素焦点更改方面的行为">Selection API 在可编辑元素焦点更改方面的行为</h3>
+
+<p>Selection API 有一个共同的行为（即在浏览器之间共通），该行为控制在调用某些方法后<a href="#Glossary">可编辑元素</a>（原文 Editing Hosts，可编辑宿主）的焦点行为如何更改。</p>
+
+<p>其行为如下：</p>
+
+<ol>
+ <li>如果先前的选区不在可编辑元素内，则可编辑元素将获得焦点。</li>
+ <li>调用一个 Selection API 方法，从而在可编辑元素内产生一个新选区，来创造一个新的 <code>Selection</code> 区域（{{domxref("Range")}}）。</li>
+ <li>然后焦点（此处应指显示的，译者注）移到可编辑元素。</li>
+</ol>
+
+<p><strong>注意：Selection API方法只能将焦点移动到可编辑元素，而不能移动到其他可焦点元素（例如{{HTMLElement("a")}}）。</strong></p>
+
+<p>上述行为适用于使用以下方法产生的选区：</p>
+
+<ul>
+ <li>{{domxref("Selection.collapse()")}}</li>
+ <li>{{domxref("Selection.collapseToStart()")}}</li>
+ <li>{{domxref("Selection.collapseToEnd()")}}</li>
+ <li>{{domxref("Selection.extend()")}}</li>
+ <li>{{domxref("Selection.selectAllChildren()")}}</li>
+ <li>{{domxref("Selection.addRange()")}}</li>
+ <li>{{domxref("Selection.setBaseAndExtent()")}}</li>
+</ul>
+
+<p>以及在 {{domxref("Range")}} 使用以下方法修改时：</p>
+
+<ul>
+ <li>{{domxref("Range.setStart()")}}</li>
+ <li>{{domxref("Range.setEnd()")}}</li>
+ <li>{{domxref("Range.setStartBefore()")}}</li>
+ <li>{{domxref("Range.setStartAfter()")}}</li>
+ <li>{{domxref("Range.setEndBefore()")}}</li>
+ <li>{{domxref("Range.setEndAfter()")}}</li>
+ <li>{{domxref("Range.collapse()")}}</li>
+ <li>{{domxref("Range.selectNode()")}}</li>
+ <li>{{domxref("Range.selectNodeContents()")}}</li>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据，请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div>
+
+<p>{{Compat("api.Selection")}}</p>
+
+<h3 id="Gecko_备注">Gecko 备注</h3>
+
+<ul>
+ <li>Gecko/Firefox 提供了其他功能，仅适用于Chrome（内置及插件）代码。 这些定义在 {{Interface("nsISelectionPrivate")}} 中。</li>
+ <li>Mozilla 实现源代码：{{Source("dom/webidl/Selection.webidl")}}</li>
+ <li>在Firefox 29之前，{{domxref("Selection.selectionLanguageChange()")}}{{Obsolete_Inline("gecko29")}} 都会暴露在Web内容中。</li>
+</ul>
+
+<h2 id="See_also" name="See_also">扩展</h2>
+
+<ul>
+ <li>{{domxref("window.getSelection")}}，{{domxref("document.getSelection")}}及{{domxref("Range")}}</li>
+ <li>HTML5 DOM Range <a class="external" href="http://html5.org/specs/dom-range.html#selection" title="http://html5.org/specs/dom-range.html#selection">Interface Selection</a></li>
+ <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">IDL definition in Mozilla cross-reference</a></li>
+ <li><a href="http://www.zhihu.com/question/20874144">目前 CSS 实现竖排文本较为通用的方式是什么？</a>（页内搜索"Bidi"可了解Bidi优先顺序）</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/iscollapsed/index.html b/files/zh-cn/web/api/selection/iscollapsed/index.html
new file mode 100644
index 0000000000..313426bc83
--- /dev/null
+++ b/files/zh-cn/web/api/selection/iscollapsed/index.html
@@ -0,0 +1,16 @@
+---
+title: Selection.isCollapsed
+slug: Web/API/Selection/isCollapsed
+translation_of: Web/API/Selection/isCollapsed
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">概述</h3>
+<p>返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置（即是否框选了，译者注）。</p>
+<h3 id="Syntax" name="Syntax">用法</h3>
+<pre class="eval"><i>sel</i>.isCollapsed
+</pre>
+<h3 id="Notes" name="Notes">注意</h3>
+<p>即使是一个被折叠了的选区，其 rangeCount的结果也可能大于0。<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">sel.getRangeAt(0)会在选区被折叠的情况下返回一个值。</span></p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}</p>
diff --git a/files/zh-cn/web/api/selection/modify/index.html b/files/zh-cn/web/api/selection/modify/index.html
new file mode 100644
index 0000000000..db41ec4708
--- /dev/null
+++ b/files/zh-cn/web/api/selection/modify/index.html
@@ -0,0 +1,109 @@
+---
+title: Selection.modify()
+slug: Web/API/Selection/modify
+tags:
+  - HTML 编辑
+  - 参考
+  - 方法
+  - 选区
+translation_of: Web/API/Selection/modify
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{non-standard_header}}</div>
+</div>
+</div>
+
+<p><strong><code>Selection.modify()</code></strong> 方法可以通过简单的文本命令来改变当前选区或光标位置。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.modify(<em>alter</em>, <em>direction</em>, <em>granularity</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<dl>
+ <dt><em>alter</em></dt>
+ <dd>改变类型. 传入<code>"move"来移动光标位置，或者</code><code>"extend"来扩展当前选区。</code></dd>
+ <dt><em>direction</em></dt>
+ <dd>调整选区的方向。你可以传入<code>"forward"<font face="Open Sans, Arial, sans-serif">或</font></code><code>"backward"来根据选区内容的语言书写方向来调整。或者使用"left"或"right"来指明一个明确的调整方向。</code></dd>
+ <dt><em>granularity</em></dt>
+ <dd>调整的距离颗粒度。可选值有<code>"character"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"word"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"sentence"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"line"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"paragraph"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"lineboundary"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"sentenceboundary"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"paragraphboundary"<font face="Open Sans, Arial, sans-serif">、</font></code><code>"documentboundary"。</code></dd>
+</dl>
+
+<div class="note"><strong>注意:</strong> Gecko <strong>不支持</strong> <code>"sentence"</code>, <code>"paragraph"</code>, <code>"sentenceboundary"</code>, <code>"paragraphboundary"和</code><code>"documentboundary"</code>. Webkit和Blink 支持。</div>
+
+<div class="note">
+<p><strong>注意:</strong> 从{{Gecko("5.0")}}开始，不管是不是浏览器的默认行为，<code>"word"颗粒度不再包括</code>单词后面的空格。这让这个行为变得更加稳定，这也和之前的Webkit保持一致，然而不幸的是他们最近修改了这个默认行为。</p>
+</div>
+
+<h2 id="例子">例子</h2>
+
+<p>使当前选区往语言书写方向扩大一个单词（word）的选择范围</p>
+
+<pre>var selection = window.getSelection();
+selection.modify("extend", "forward", "word");
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<p><em>无</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>支持最低版本</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}§</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>支持最低版本</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}，本方法所属的接口.</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/rangecount/index.html b/files/zh-cn/web/api/selection/rangecount/index.html
new file mode 100644
index 0000000000..ad05478e8d
--- /dev/null
+++ b/files/zh-cn/web/api/selection/rangecount/index.html
@@ -0,0 +1,129 @@
+---
+title: Selection.rangeCount
+slug: Web/API/Selection/rangeCount
+tags:
+  - API
+  - Selection
+translation_of: Web/API/Selection/rangeCount
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p>The <strong><code>Selection.rangeCount</code></strong>是一个返回选区(selection)中range对象数量的只读属性。</p>
+
+<p>在网页使用者点击一个加载完毕的新打开的页面之前，<strong>rangeCount</strong><font face="Consolas, Liberation Mono, Courier, monospace">的值是0</font>。在使用者点击页面之后，<font face="Consolas, Liberation Mono, Courier, monospace">rangeCount的值变为1，即使并没有可视的选区(selection)。</font></p>
+
+<p>使用者一般情况下在一次只能选择一个range ，所以通常情况下<strong>rangeCount属性</strong>的值总为1。脚本(如javascript)可以使选区包含多个range。</p>
+
+<p>Gecko 浏览器允许跨表格单元格获得多个选区(此处可能翻译不准). Firefox allows to select multiple ranges in the document by using Ctrl+click (unless the click within an element with display: table-cell).</p>
+
+<h2 id="Syntax" name="Syntax">用法</h2>
+
+<pre class="syntaxbox"><em>value</em> =<em> sel</em>.rangeCount
+</pre>
+
+<h2 id="例子">例子</h2>
+
+<p>下面这个例子会每隔一秒显示一次rangeCount的值。在浏览器中选择文本，然后看看他的改变。</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">//打开控制台看看selection中有多少range对象。
+//在Gecko浏览器，当你用鼠标在表格单元格中拖动的同时按住Ctrl，你可以选择多个range。
+
+&lt;table&gt;
+&lt;tr&gt;&lt;td&gt;a.1&lt;td&gt;a.2
+&lt;tr&gt;&lt;td&gt;b.1&lt;td&gt;b.2
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">window.setInterval(function () {
+  console.log(window.getSelection().rangeCount);
+}, 1000);
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-rangecount', 'Selection.rangeCount')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-rangeCount', 'Selection.rangeCount')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</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>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, the interface it belongs to.</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/removeallranges/index.html b/files/zh-cn/web/api/selection/removeallranges/index.html
new file mode 100644
index 0000000000..656793f37b
--- /dev/null
+++ b/files/zh-cn/web/api/selection/removeallranges/index.html
@@ -0,0 +1,57 @@
+---
+title: Selection.removeAllRanges()
+slug: Web/API/Selection/removeAllRanges
+translation_of: Web/API/Selection/removeAllRanges
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p><strong><code>Selection.removeAllRanges()方法</code></strong><code>会从当前selection对象中移除所有</code>的range对象,取消所有的选择只 留下{{domxref("Selection.anchorNode", "anchorNode")}} 和{{domxref("Selection.focusNode","focusNode")}}属性并将其设置为null。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.removeAllRanges();
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<p><em>无。</em></p>
+
+<h2 id="规范">规范</h2>
+
+<p> </p>
+
+<table class="standard-table" style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-removeallranges', 'Selection.removeAllRanges()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-removeAllRanges-void', 'Selection.removeAllRanges()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{Compat("api.Selection.removeAllRanges")}}</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}，此方法所属接口。</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/removerange/index.html b/files/zh-cn/web/api/selection/removerange/index.html
new file mode 100644
index 0000000000..42a20eb578
--- /dev/null
+++ b/files/zh-cn/web/api/selection/removerange/index.html
@@ -0,0 +1,37 @@
+---
+title: Selection.removeRange()
+slug: Web/API/Selection/removeRange
+translation_of: Web/API/Selection/removeRange
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">概述</h3>
+<p>将一个区域从选区中移除。</p>
+<h3 id="Syntax" name="Syntax">用法</h3>
+<pre class="eval"><i>sel</i>.removeRange(<i>range</i>)
+</pre>
+<h3 id="Parameters" name="Parameters">参数</h3>
+<dl>
+ <dt>
+  <i>
+   <code>range</code></i>
+ </dt>
+ <dd>
+  Range对象将从选区当中移除。</dd>
+</dl>
+<h3 id="Examples" name="Examples">Examples</h3>
+<pre class="eval">/* 通过设计一段js代码，我们可以获得多个区域，
+ * 这段代码可以移除除了第一个<span style="font-size: 1rem;">区域</span><span style="font-size: 1rem;">之外的所有</span><span style="font-size: 1rem;">区域</span><span style="font-size: 1rem;">。
+</span><span style="font-size: 1rem;"> * （此代码在Chrome中不生效，因为Chrome当中只能
+ * 选择一个选区，哎我为什么要在 Mozilla 的网站上
+ * 说这个？译者注）*/</span>
+
+s = window.getSelection();
+if(s.rangeCount &gt; 1) {
+ for(var i = 1; i &lt; s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}</p>
diff --git a/files/zh-cn/web/api/selection/selectallchildren/index.html b/files/zh-cn/web/api/selection/selectallchildren/index.html
new file mode 100644
index 0000000000..eae930d887
--- /dev/null
+++ b/files/zh-cn/web/api/selection/selectallchildren/index.html
@@ -0,0 +1,64 @@
+---
+title: Selection.selectAllChildren()
+slug: Web/API/Selection/selectAllChildren
+translation_of: Web/API/Selection/selectAllChildren
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p>Selection.selectAllChildren()把指定元素的所有子元素设为选中区域，并取消之前的选中区域。</p>
+
+<h2 id="Syntax" name="Syntax">用法</h2>
+
+<pre class="syntaxbox"><em>sel</em>.selectAllChildren(<em>parentNode</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<dl>
+ <dt><em><code>parentNode</code></em></dt>
+ <dd>所有parentNode元素的子元素会被设为选中区域，parentNode本身除外。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">举例</h2>
+
+<pre class="eval">footer = document.getElementById("footer");
+window.getSelection().selectAllChildren(footer);
+/* Everything inside the footer is now selected *</pre>
+
+<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('HTML Editing', '#dom-selection-selectallchildren', 'Selection.selectAllChildren()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-selectAllChildren-void-Node-node', 'Selection.selectAllChildren()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div id="compat-desktop">
+<p>{{Compat("api.Selection.selectAllChildren")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, 此方法所属接口。</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/setbaseandextent/index.html b/files/zh-cn/web/api/selection/setbaseandextent/index.html
new file mode 100644
index 0000000000..4a02231e34
--- /dev/null
+++ b/files/zh-cn/web/api/selection/setbaseandextent/index.html
@@ -0,0 +1,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">&lt;h1&gt;setBaseAndExtent example&lt;/h1&gt;
+&lt;div&gt;
+  &lt;p class="one"&gt;&lt;span&gt;Fish&lt;/span&gt;&lt;span&gt;Dog&lt;/span&gt;&lt;span&gt;Cat&lt;/span&gt;&lt;span&gt;Bird&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;MIDDLE&lt;/p&gt;
+  &lt;p class="two"&gt;&lt;span&gt;Car&lt;/span&gt;&lt;span&gt;Bike&lt;/span&gt;&lt;span&gt;Boat&lt;/span&gt;&lt;span&gt;Plane&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;p&gt;
+    &lt;label for="aOffset"&gt;Anchor offset&lt;/label&gt;
+    &lt;input id="aOffset" name="aOffset" type="number" value="0"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="fOffset"&gt;Focus offset&lt;/label&gt;
+    &lt;input id="fOffset" name="fOffset" type="number" value="0"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;button&gt;Capture selection&lt;/button&gt;&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;&lt;strong&gt;Output&lt;/strong&gt;: &lt;span class="output"&gt;&lt;/span&gt;&lt;/p&gt;</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>
diff --git a/files/zh-cn/web/api/selection/tostring/index.html b/files/zh-cn/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..c7177c12c6
--- /dev/null
+++ b/files/zh-cn/web/api/selection/tostring/index.html
@@ -0,0 +1,112 @@
+---
+title: Selection.toString()
+slug: Web/API/Selection/toString
+translation_of: Web/API/Selection/toString
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p><strong><code>Selection.toString()</code></strong>返回代表当前selection对象的字符串,例如当前选择的文本文字.</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><em>str</em> =<em> sel</em>.toString()
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<ul>
+ <li><em><code>str</code></em> 代表selection的字符串.</li>
+</ul>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<p><em>无.</em></p>
+
+<h2 id="Description" name="Description">描述</h2>
+
+<p>此方法返回当前被选中的文本文字.</p>
+
+<p>在<a href="en/JavaScript">JavaScript</a>中, 当selection对象作为字符串类型使用时，此方法会被自动调用:</p>
+
+<pre class="brush: js">alert(window.getSelection()) // 被调用时
+alert(window.getSelection().toString())  // 真实情况
+</pre>
+
+<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('HTML Editing', '#dom-selection-stringifier', 'Selection.toString()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基础特性</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基础特性</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">参考</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, Selection接口规范.</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/type/index.html b/files/zh-cn/web/api/selection/type/index.html
new file mode 100644
index 0000000000..b7f2507975
--- /dev/null
+++ b/files/zh-cn/web/api/selection/type/index.html
@@ -0,0 +1,116 @@
+---
+title: Selection.type
+slug: Web/API/Selection/type
+translation_of: Web/API/Selection/type
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p><code><strong>type</strong></code>是 {{domxref("Selection")}} 接口的只读属性，其返回的是{{domxref("DOMString")}}即描述当前选择的类型 。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox notranslate"><em>value</em> =<em> sel</em>.type
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>{{domxref("DOMString")}} 描述的是当前选择的类型。可能的值为:</p>
+
+<ul>
+ <li><code>None</code>: 当前没有选择。</li>
+ <li><code>Caret</code>: 选区已折叠（即 光标在字符之间，并未处于选中状态）。</li>
+ <li><code>Range</code>: 选择的是一个范围。</li>
+</ul>
+
+<h2 id="例子">例子</h2>
+
+<p>在下面的示例中，回调函数将在每次进行新的选择时触发。 <code>console.log(selection.type)</code> 将会输出 <code>Caret</code> 或者 <code>Range</code> ，其输出值取决于插入标记是放置在文本中的单个点还是已选择范围。</p>
+
+<pre class="syntaxbox notranslate">var selection;
+
+document.onselectionchange = function() {
+  console.log('New selection made');
+  selection = document.getSelection();
+  console.log(selection.type);
+};</pre>
+
+<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-type', 'Selection.type')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</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>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">参考</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/selection/从document中删除/index.html b/files/zh-cn/web/api/selection/从document中删除/index.html
new file mode 100644
index 0000000000..5532bcf0fc
--- /dev/null
+++ b/files/zh-cn/web/api/selection/从document中删除/index.html
@@ -0,0 +1,107 @@
+---
+title: Selection.deleteFromDocument()
+slug: Web/API/Selection/从Document中删除
+translation_of: Web/API/Selection/deleteFromDocument
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<div class="note">
+<p>The <strong><code>Selection.deleteFromDocument()</code></strong> method deletes the actual text being represented by a selection object from the document's DOM.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>sel</em>.deleteFromDocument()
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<p><em>None.</em></p>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<p>A user selects the (imaginary) text "ve two ea" from "Rabbits have two ears." on a web page. The user then clicks a button that executes the JavaScript snippet <code>window.getSelection().deleteFromDocument()</code>. The document's text becomes "Rabbits hars."</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-deletefromdocument', 'Selection.deleteFromDocument()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-deleteFromDocument-void', 'Selection.deleteFromDocument()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Current</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, the interface it belongs to.</li>
+</ul>