1 files changed, 70 insertions, 9 deletions
diff --git a/files/zh-cn/web/api/document/getselection/index.html b/files/zh-cn/web/api/document/getselection/index.html
index 73b3a4ce6b..f3eca58f61 100644
--- a/files/zh-cn/web/api/document/getselection/index.html
+++ b/files/zh-cn/web/api/document/getselection/index.html
@@ -1,15 +1,76 @@
 ---
-title: document.getSelection
+title: DocumentOrShadowRoot.getSelection()
 slug: Web/API/Document/getSelection
 translation_of: Web/API/DocumentOrShadowRoot/getSelection
-translation_of_original: Web/API/Document/getSelection
+original_slug: Web/API/DocumentOrShadowRoot/getSelection
 ---
-<article class="approved text-content" style="padding-right: 10px; width: 652px; float: left;">
-<div class="boxed translate-rendered" style="">
-<p>{{APIRef("DOM")}}</p>
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
 
-<p>该方法的功能等价于 {{domxref("Window.getSelection()")}} 方法；其返回一个 {{domxref("Selection")}} 对象，表示文档中当前被选择的文本。</p>
-</div>
-</article>
+<p><span class="seoSummary">The <strong><code>getSelection()</code></strong> property of the {{DOMxRef("DocumentOrShadowRoot")}} interface returns a {{DOMxRef("Selection")}} object representing the range of text selected by the user, or the current position of the caret.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var selection = documentOrShadowRootInstance.getSelection()</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A {{DOMxRef("Selection")}} object.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">function foo() {
+    var selObj = document.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // do stuff with the range
+}</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<h3 id="String_representation_of_the_Selection_object">String representation of the Selection object</h3>
+
+<p>In JavaScript, when an object is passed to a function expecting a string (like {{DOMxRef("Window.alert()")}}), the object's {{JSxRef("Object.toString", "toString()")}} method is called and the returned value is passed to the function. This can make the object appear to be a string when used with other functions when it is really an object with properties and methods.</p>
 
-<p> </p>
+<p>In the above example, <code>selObj.toString()</code> is automatically called when it is passed to {{DOMxRef("Window.alert()")}}. However, attempting to use a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a> property or method such as <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code> directly on a {{DOMxRef("Selection")}} object results in an error if it does not have that property or method and may return unexpected results if it does. To use a <code>Selection</code> object as a string, call its <code>toString()</code> method directly:</p>
+
+<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
+
+<ul>
+ <li><code>selObj</code> is a <code>Selection</code> object.</li>
+ <li><code>selectedText</code> is a string (Selected text).</li>
+</ul>
+
+<h3 id="Related_objects">Related objects</h3>
+
+<p>HTML inputs provide simpler helper APIs for working with selection (see {{DOMxRef("HTMLInputElement.setSelectionRange()")}}).</p>
+
+<p>Notice the difference between <em>selection</em> and <em>focus</em>. {{DOMxRef("Document.activeElement")}} returns the focused element.</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("Shadow DOM", "#extensions-to-the-documentorshadowroot-mixin", "DocumentOrShadowRoot")}}</td>
+   <td>{{Spec2("Shadow DOM")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.getSelection")}}</p>
+</div>