diff options
Diffstat (limited to 'files/zh-cn/web/api/range')
24 files changed, 2103 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/range/clonecontents/index.html b/files/zh-cn/web/api/range/clonecontents/index.html new file mode 100644 index 0000000000..6f4e15b4ea --- /dev/null +++ b/files/zh-cn/web/api/range/clonecontents/index.html @@ -0,0 +1,64 @@ +--- +title: Range.cloneContents() +slug: Web/API/Range/cloneContents +tags: + - API + - DOM + - Method + - Range +translation_of: Web/API/Range/cloneContents +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Range.cloneContents()</code></strong> 返回一个 {{ domxref("DocumentFragment") }}，它是 {{ domxref("Range") }} 中所有的 {{ domxref("Node") }} 对象的副本。</p> + +<p>使用" DOM 事件"添加的“事件侦听器”在克隆过程中不会被复制。 HTML属性事件与“DOM Core cloneNode”方法一样被复制。“HTML id属性”也将被克隆，这可能导致通过克隆导致无效的文档。</p> + +<p>Partially selected nodes include the parent tags necessary to make the document fragment valid.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox notranslate"><em>documentFragment </em>= <em>range</em>.cloneContents(); +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js notranslate">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +documentFragment = range.cloneContents(); +document.body.appendChild(documentFragment); +</pre> + +<h2 id="Specification" name="Specification"> 规范</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('DOM WHATWG', '#dom-range-clonecontents', 'Range.cloneContents()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-cloneContents', 'Range.cloneContents()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的“兼容性表”是根据“结构化数据”生成的。 如果您想提供数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们 pull request.。</div> + +<p>{{Compat("api.Range.cloneContents")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/clonerange/index.html b/files/zh-cn/web/api/range/clonerange/index.html new file mode 100644 index 0000000000..ab2f842993 --- /dev/null +++ b/files/zh-cn/web/api/range/clonerange/index.html @@ -0,0 +1,104 @@ +--- +title: Range.cloneRange() +slug: Web/API/Range/cloneRange +translation_of: Web/API/Range/cloneRange +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>Range.cloneRange()</strong></code>方法返回一个range对象，并且该对象的范围边界点与被克隆的range对象相同。</p> + +<p>克隆的对象是复制过来的，而非引用，所以这两个对象双方各自做出的改变，都不会影响另一方。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>clone</em> = range.cloneRange(); +</pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +clone = range.cloneRange(); +</pre> + +<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-range-clonerange', 'Range.cloneRange()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-clone', 'Range.cloneRange()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/collapse/index.html b/files/zh-cn/web/api/range/collapse/index.html new file mode 100644 index 0000000000..621eae884f --- /dev/null +++ b/files/zh-cn/web/api/range/collapse/index.html @@ -0,0 +1,65 @@ +--- +title: Range.collapse() +slug: Web/API/Range/collapse +translation_of: Web/API/Range/collapse +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Range.collapse()</strong></code> 方法向边界点折叠该 {{domxref("Range")}} 。</p> + +<p>折叠后的 {{domxref("Range")}} 为空，不包含任何内容。</p> + +<p>要确定 {{domxref("Range")}} 是否已折叠，使用{{domxref("Range.collapsed")}} 属性。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>range</em>.collapse(<em>toStart</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em>toStart </em>{{optional_inline}}</dt> + <dd>一个布尔值： <code>true</code> 折叠到 {{domxref("Range")}} 的 start 节点，<code>false</code> 折叠到 end 节点。如果省略，则默认为 false {{experimental_inline}}<code>.</code></dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush:js">var range = document.createRange(); + +referenceNode = document.getElementsByTagName("div").item(0); +range.selectNode(referenceNode); +range.collapse(true); +</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('DOM WHATWG', '#dom-range-collapse', 'Range.collapse()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>The parameter is now optional and default to <code>false</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-collapse', 'Range.collapse()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div id="compat-desktop">{{Compat("api.Range.collapse")}}</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/collapsed/index.html b/files/zh-cn/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..36a9f82972 --- /dev/null +++ b/files/zh-cn/web/api/range/collapsed/index.html @@ -0,0 +1,104 @@ +--- +title: Range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +<div> +<p>{{ APIRef("DOM") }}</p> +</div> + +<p> <code><strong>Range.collapsed</strong></code> 是只读属性。它返回一个 {{domxref("Boolean")}} 值表示是否起始点和结束点是同一个位置。 如果返回 <code>true</code> 表示{{domxref("Range")}} 的起始位置和结束位置重合, <code>false</code> 表示不重合。</p> + +<p> 一个折叠的{{domxref("Range")}} 是空的，不包含内容，表示Dom树中的一个点。collapsed 属性是只读的。可以调用 {{domxref("Range.collapse()")}} 方法来折叠选区。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>isCollapsed</em> = <em>range</em>.collapsed; +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +isCollapsed = range.collapsed; +</pre> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-range-collapsed', 'Range.collapsed')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-collapsed', 'Range.collapsed')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/commonancestorcontainer/index.html b/files/zh-cn/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..9961f3948a --- /dev/null +++ b/files/zh-cn/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,58 @@ +--- +title: Range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +<div>{{ApiRef("DOM")}}</div> + +<p><code><strong>Range.commonAncestorContainer</strong></code><strong> </strong>只读属性，返回目标节点的共有祖先节点。因而需要注意：selectNode方法中的该值为目标节点的父节点，selectNodeContents方法中的该值为其本身。</p> + +<p>在某些跨节点的选取操作时，取得最大"公约数"的节点为<code>commonAncestorContainer。</code>即{{domxref("Range.startContainer")}} 和 {{domxref("Range.endContainer")}} 相同的节点是目标节点的 共有祖先节点。</p> + +<p>更改 {{domxref("Node")}}, 请使用setStart setEnd 及这两种方法的延伸方法 {{domxref("Range")}}.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">rangeAncestor = <em>range</em>.commonAncestorContainer;</pre> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +rangeAncestor = range.commonAncestorContainer;</pre> + +<h2 id="Specification" name="Specification">特别说明</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('DOM WHATWG', '#dom-range-commonancestorcontainer', 'Range.commonAncestorContainer')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-commonParent', 'Range.commonAncestorContainer')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="支持度">支持度</h2> + + + +<p>{{Compat("api.Range.commonAncestorContainer")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM接口相关内容</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/createcontextualfragment/index.html b/files/zh-cn/web/api/range/createcontextualfragment/index.html new file mode 100644 index 0000000000..917929e7ea --- /dev/null +++ b/files/zh-cn/web/api/range/createcontextualfragment/index.html @@ -0,0 +1,60 @@ +--- +title: Range.createContextualFragment() +slug: Web/API/Range/createContextualFragment +translation_of: Web/API/Range/createContextualFragment +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Range.createContextualFragment()</code></strong> 方法通过以 range 的开头（选定节点的父级）作为上下文节点来调用 HTML 片段解析算法 或者 XML 片段解析算法来返回 {{domxref("DocumentFragment")}}。如果 range 属于一个其 HTMLness bit 被设置了的 {{domxref("Document")}} 则会应用 HTML 片段解析算法。在 HTML 的情况下，如果上下文节点为 html，由于历史原因，将使用 body 作为上下文来调用片段解析算法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>documentFragment</em> = <em>range</em>.createContextualFragment(<em>tagString</em>) +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>tagString</code></dt> + <dd>包含要转换为文档片段的文本和标签的文本。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">var tagString = "<div>I am a div node</div>"; +var range = document.createRange(); + +// 使文档中第一个 div 的父级成为上下文节点 +range.selectNode(document.getElementsByTagName("div").item(0)); +var documentFragment = range.createContextualFragment(tagString); +document.body.appendChild(documentFragment); +</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('DOM Parsing', '#dom-range-createcontextualfragment', 'Range.createContextualFragment()')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Range.createContextualFragment")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/deletecontents/index.html b/files/zh-cn/web/api/range/deletecontents/index.html new file mode 100644 index 0000000000..44c82fb1d7 --- /dev/null +++ b/files/zh-cn/web/api/range/deletecontents/index.html @@ -0,0 +1,109 @@ +--- +title: Range.deleteContents() +slug: Web/API/Range/deleteContents +tags: + - API + - DOM + - Method + - Range +translation_of: Web/API/Range/deleteContents +--- +<p>{{ApiRef("DOM")}}</p> + +<p><strong><code>Range.deleteContents()</code></strong> 移除来自 {{ domxref("Document") }}的{{ domxref("Range") }} 内容。</p> + +<p>不像{{ domxref("Range.extractContents") }}一样，本方法不会返回一个包含删除内容的文本片段{{domxref("DocumentFragment")}} 。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>range</em>.deleteContents() +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +range.deleteContents(); +</pre> + +<h2 id="Specification" name="Specification">规范</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', '#dom-range-deletecontents', 'Range.deleteContents()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-deleteContents', 'Range.deleteContents()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/endcontainer/index.html b/files/zh-cn/web/api/range/endcontainer/index.html new file mode 100644 index 0000000000..f69106d61b --- /dev/null +++ b/files/zh-cn/web/api/range/endcontainer/index.html @@ -0,0 +1,105 @@ +--- +title: Range.endContainer +slug: Web/API/Range/endContainer +translation_of: Web/API/Range/endContainer +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Range.endContainer</code></strong> 是一个只读属性。它会返回{{domxref("Range")}}对象结束的{{domxref("Node")}}。如果要改变一个节点结束的位置，使用方法{{domxref("Range.setEnd()")}}或者相似的方法。</p> + +<h2 id="Syntax" name="Syntax"><strong>语法</strong></h2> + +<pre class="syntaxbox"><em>endRangeNode</em> = <em>range</em>.endContainer; +</pre> + +<h2 id="Example" name="Example"><strong>示例</strong></h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +endRangeNode = range.endContainer; + +</pre> + +<h2 id="Specification" name="Specification"><strong>规范</strong></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('DOM WHATWG', '#dom-range-endcontainer', 'Range.endContainer')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-endParent', 'Range.endContainer')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/endoffset/index.html b/files/zh-cn/web/api/range/endoffset/index.html new file mode 100644 index 0000000000..75b44934a1 --- /dev/null +++ b/files/zh-cn/web/api/range/endoffset/index.html @@ -0,0 +1,60 @@ +--- +title: Range.endOffset +slug: Web/API/Range/endOffset +tags: + - API + - DOM + - Range + - 属性 +translation_of: Web/API/Range/endOffset +--- +<div>{{ApiRef("DOM")}}</div> + +<p><span style="line-height: 1.5;">只读属性</span> <code><strong>Range.endOffset</strong></code> 返回代表<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">Range</code><span style="line-height: 1.5;"> 结束位置在 </span>{{domxref("Range.endContainer")}} <span style="line-height: 1.5;">中的偏移值的数字。</span></p> + +<p>如果 <code>endContainer</code> 的 {{domxref("Node")}} 类型为 {{domxref("Text")}}, {{domxref("Comment")}}，或 {{domxref("CDATASection")}}，偏移值是 <code>endContainer</code> 节点开头到 {{domxref("Range")}} 末尾的总字符个数。对其他类型的 {{domxref("Node")}} ， <code>endOffset</code> 指 <code>endContainer</code> 开头到 {{domxref("Range")}} 末尾的总 {{domxref("Node")}} 个数。如需修改 <code>endOffset</code> 的值， 使用 {{domxref("Range.setEnd")}} 方法。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>endRangeOffset</em> = <em>range</em>.endOffset; +</pre> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +endRangeOffset = range.endOffset;</pre> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-range-endoffset', 'Range.endOffset')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-endOffset', 'Range.endOffset')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Range.endOffset")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/extractcontents/index.html b/files/zh-cn/web/api/range/extractcontents/index.html new file mode 100644 index 0000000000..0f3e83ced9 --- /dev/null +++ b/files/zh-cn/web/api/range/extractcontents/index.html @@ -0,0 +1,60 @@ +--- +title: Range.extractContents() +slug: Web/API/Range/extractContents +translation_of: Web/API/Range/extractContents +--- +<p>{{ApiRef("DOM")}}</p> + +<p><strong><code>Range.extractContents()</code></strong> 方法移动了{{ domxref("Range") }} 中的内容从文档树到{{ domxref("DocumentFragment") }}（文档片段对象）。</p> + +<p>使用DOM事件添加的事件侦听器在提取期间不会保留。 HTML属性事件将按{{domxref("Node.cloneNode()")}}方法的原样保留或复制。 HTML id属性也会被克隆，如果提取了部分选定的节点并将其附加到文档中，则可能导致无效的文档。</p> + +<p>克隆了部分选定的节点，以包括使文档片段有效所需的父标记。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.extractContents(); +</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +var documentFragment = range.extractContents(); +document.body.appendChild(documentFragment); +</pre> + +<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('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Range.extractContents")}}</p> + + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/getboundingclientrect/index.html b/files/zh-cn/web/api/range/getboundingclientrect/index.html new file mode 100644 index 0000000000..4c10f536b0 --- /dev/null +++ b/files/zh-cn/web/api/range/getboundingclientrect/index.html @@ -0,0 +1,90 @@ +--- +title: Range.getBoundingClientRect() +slug: Web/API/Range/getBoundingClientRect +tags: + - API + - CSSOM View + - Method + - Range + - 域 + - 方法 + - 范围 +translation_of: Web/API/Range/getBoundingClientRect +--- +<div>{{ApiRef("DOM")}}{{SeeCompatTable}}</div> + +<p><strong><code>Range.getBoundingClientRect()</code></strong> 返回一个 {{ domxref("DOMRect") }} 对象，该对象将范围中的内容包围起来；即该对象是一个将范围内所有元素的边界矩形包围起来的矩形（译者注：关于边界矩形，可以参考 <a href="https://en.wikipedia.org/wiki/Minimum_bounding_rectangle">Minimum Bouding Rectangles</a>）。</p> + +<p>此方法可用于确定文本区域中选中的部分或光标的视窗坐标。关于返回值的详细信息，参见 {{domxref("Element.getBoundingClientRect()")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>boundingRect</var> = <var>range</var>.getBoundingClientRect() +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="highlight"></div> +<p>This example positions a "highlight" rectangle behind the contents of a range. The range's content <b>starts here</b> and continues on until it <b>ends here</b>. The bounding client rectangle contains everything selected in the range.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#highlight { + background: yellow; + position: absolute; + z-index: -1; +} + +p { + width: 200px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const range = document.createRange(); +range.setStartBefore(document.getElementsByTagName('b').item(0), 0); +range.setEndAfter(document.getElementsByTagName('b').item(1), 0); + +const clientRect = range.getBoundingClientRect(); +const highlight = document.getElementById('highlight'); +highlight.style.left = `${clientRect.x}px`; +highlight.style.top = `${clientRect.y}px`; +highlight.style.width = `${clientRect.width}px`; +highlight.style.height = `${clientRect.height}px`;</pre> + +<h3 id="结果">结果</h3> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Range/getBoundingClientRect$samples/Example?revision=1549349"></iframe></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('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Range.getBoundingClientRect")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Range.getClientRects()")}} - 对于非矩形的范围（如选择部分换行了）会返回更细致的结果。</li> + <li>{{domxref("Element.getBoundingClientRect()")}}</li> + <li>{{domxref("Document.caretPositionFromPoint()")}} - 使用视窗坐标获取节点范围。</li> +</ul> diff --git a/files/zh-cn/web/api/range/getclientrects/index.html b/files/zh-cn/web/api/range/getclientrects/index.html new file mode 100644 index 0000000000..96de4d768a --- /dev/null +++ b/files/zh-cn/web/api/range/getclientrects/index.html @@ -0,0 +1,56 @@ +--- +title: Range.getClientRects() +slug: Web/API/Range/getClientRects +tags: + - API + - CSSOM + - 参考 + - 实验性 + - 方法 + - 范围 +translation_of: Web/API/Range/getClientRects +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Range.getClientRects()</code></strong><strong> </strong>方法返回一个 {{ domxref("DOMRect") }} 对象列表，表示 <a href="/en/DOM/range" title="https://developer.mozilla.org/en/dom:range">range</a> 在屏幕上所占的区域。这个列表相当于汇集了范围中所有元素调用 {{ domxref("Element.getClientRects()") }} 方法所得的结果。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>rectList</em> = <em>range</em>.getClientRects() +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +rectList = range.getClientRects(); +</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('CSSOM View', '#dom-range-getclientrects', 'Range.getClientRects()')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Range.getClientRects")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Range")}}</li> +</ul> diff --git a/files/zh-cn/web/api/range/index.html b/files/zh-cn/web/api/range/index.html new file mode 100644 index 0000000000..cc9fd2a207 --- /dev/null +++ b/files/zh-cn/web/api/range/index.html @@ -0,0 +1,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> diff --git a/files/zh-cn/web/api/range/insertnode/index.html b/files/zh-cn/web/api/range/insertnode/index.html new file mode 100644 index 0000000000..fa1c070c07 --- /dev/null +++ b/files/zh-cn/web/api/range/insertnode/index.html @@ -0,0 +1,119 @@ +--- +title: Range.insertNode() +slug: Web/API/Range/insertNode +translation_of: Web/API/Range/insertNode +--- +<div>{{ApiRef("DOM")}}</div> + +<p><code><strong>Range.insertNode()</strong></code> 是在{{domxref("Range")}}的起始位置插入节点的方法。</p> + +<p>新节点是插入在 the <code>Range起始位置。如果将新节点添加到一个文本</code> {{domxref("节点")}}, 则该节点在插入点处被拆分，插入发生在两个文本节点之间</p> + +<p>如果新节点是一个文档片段，则插入文档片段的子节点。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>range</em>.insertNode(<em>newNode</em>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>newNode</em></dt> + <dd>The {{domxref("Node")}} to insert at the start of the <code>range</code>.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">range = document.createRange(); +newNode = document.createElement("p"); +newNode.appendChild(document.createTextNode("New Node Inserted Here")); +range.selectNode(document.getElementsByTagName("div").item(0)); +range.insertNode(newNode); +</pre> + +<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('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatGeckoDesktop("14.0")}}<sup>[1]</sup></td> + <td>9.0</td> + <td>9.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<br> + {{CompatGeckoDesktop("14.0")}}<sup>[1]</sup></td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Prior to Gecko 14.0 {{geckoRelease("14.0")}}, this method had no effect on collapsed ranges. Now it behaves as per the specification.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/intersectsnode/index.html b/files/zh-cn/web/api/range/intersectsnode/index.html new file mode 100644 index 0000000000..6c9d92406c --- /dev/null +++ b/files/zh-cn/web/api/range/intersectsnode/index.html @@ -0,0 +1,56 @@ +--- +title: Range.intersectsNode() +slug: Web/API/Range/intersectsNode +translation_of: Web/API/Range/intersectsNode +--- +<div>{{ApiRef("DOM")}} {{SeeCompatTable}}</div> + +<p><strong><code>Range.intersectsNode()</code> </strong>方法返回一个布尔值，表明其给定的 {{domxref("Node")}} 节点是否与{{domxref("Range")}}的范围相交</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>bool</em> = <em>range</em>.intersectsNode( <em>referenceNode</em> ) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><em>referenceNode</em></dt> + <dd>与{{domxref("Range")}}做比较的{{domxref("Node")}}节点</dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.selectNode(document.getElementsByTagName("div").item(0)); +var bool = range.intersectsNode(document.getElementsByTagName("p").item(0));</pre> + +<h2 id="Specification">Specification</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('DOM WHATWG', '#dom-range-intersectsnode', 'Range.intersectNode()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Range.intersectsNode")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/range/index.html b/files/zh-cn/web/api/range/range/index.html new file mode 100644 index 0000000000..1cb97c1419 --- /dev/null +++ b/files/zh-cn/web/api/range/range/index.html @@ -0,0 +1,119 @@ +--- +title: Range() +slug: Web/API/Range/Range +translation_of: Web/API/Range/Range +--- +<p>{{ APIRef("DOM") }}{{seeCompatTable}}</p> + +<p>构造函数 <code><strong>Range()</strong></code> 返回一个新创建的 {{domxref("Range")}} 对象，新创建的对象属于全局 {{domxref("Document")}} 对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>range</em> = new Range()</pre> + +<h2 id="示例">示例</h2> + +<p>在下面的例子中，我们通过构造函数<code>Range()</code>创建了一个新的range，并且使用{{domxref("Range.setStartBefore()")}} 和{{domxref("Range.setEndAfter()")}} 分别设置了起始位置。然后，通过方法{{domxref("window.getSelection()")}}和{{domxref("Selection.addRange()")}}选中了选区range。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html notranslate" dir="rtl"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>First paragraph.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Second paragraph.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Third paragraph.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Fourth paragraph.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">const</span> paragraphs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// 创建 Range 对象</span> +<span class="keyword token">const</span> range <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Range</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Range 起始位置在段落2</span> +range<span class="punctuation token">.</span><span class="function token">setStartBefore</span><span class="punctuation token">(</span>paragraphs<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Range 结束位置在段落3</span> +range<span class="punctuation token">.</span><span class="function token">setEndAfter</span><span class="punctuation token">(</span>paragraphs<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// 获取</span> selection 对象 +<span class="keyword token">const</span> selection <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getSelection</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// 添加光标选择的范围</span> +selection<span class="punctuation token">.</span><span class="function token">addRange</span><span class="punctuation token">(</span>range<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-range', 'Range.Range()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="扩展">扩展</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/selectnode/index.html b/files/zh-cn/web/api/range/selectnode/index.html new file mode 100644 index 0000000000..3d31d105a7 --- /dev/null +++ b/files/zh-cn/web/api/range/selectnode/index.html @@ -0,0 +1,61 @@ +--- +title: Range.selectNode() +slug: Web/API/Range/selectNode +translation_of: Web/API/Range/selectNode +--- +<p>{{ApiRef("DOM")}}</p> + +<p><strong><code>Range.selectNode()</code></strong> 方法将 {{domxref("Range")}} 设置为包含整个 {{domxref("Node")}} 及其内容。{{domxref("Range")}} 的起始和结束节点的父节点与<em> referenceNode</em> 的父节点相同。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>range</em>.selectNode(<em>referenceNode</em>); +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<dl> + <dt><em>referenceNode</em></dt> + <dd>{{domxref("Range")}} 要包含的 {{domxref("Node")}}。</dd> +</dl> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">var range = document.createRange(); +var referenceNode = document.getElementsByTagName("div").item(0); + +range.selectNode(referenceNode);</pre> + +<h2 id="Specification" name="Specification">规范</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', '#dom-range-selectnode', 'Range.selectNode()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>无变化</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初始规范</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Range.selectNode")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/selectnodecontents/index.html b/files/zh-cn/web/api/range/selectnodecontents/index.html new file mode 100644 index 0000000000..6192db8697 --- /dev/null +++ b/files/zh-cn/web/api/range/selectnodecontents/index.html @@ -0,0 +1,105 @@ +--- +title: Range.selectNodeContents() +slug: Web/API/Range/selectNodeContents +tags: + - API + - DOM + - 方法 + - 范围 +translation_of: Web/API/Range/selectNodeContents +--- +<p>{{ApiRef("DOM")}}</p> + +<p><strong><code>Range.selectNodeContents()</code></strong> 方法用于设置 {{ domxref("Range") }}，使其包含一个 {{ domxref("Node") }} 的内容。</p> + +<p>{{ domxref("Range") }} 的起始和结束节点的父节点即为引用节点。 <code>startOffset</code> 为 0, <code>endOffset</code> 则是引用节点包含的字符数或子节点个数。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>range</em>.selectNodeContents(<em>referenceNode</em>); +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<dl> + <dt><em>referenceNode</em></dt> + <dd>此 {{ domxref("Node") }} 中的内容被包含在 {{ domxref("Range") }} 中。</dd> +</dl> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js">range = document.createRange(); +referenceNode = document.getElementsByTagName("div")[0]; +range.selectNodeContents(referenceNode); +</pre> + +<h3 id="实时样例">实时样例</h3> + +<p>这个例子让用户使用按钮选择或取消选择一个段落。{{domxref("Document.createRange()")}}、 <code>Range.selectNodeContents()</code> 和 {{domxref("Selection.addRange()")}} 用于选择内容。{{domxref("Window.getSelection()")}} 和 {{domxref("Selection.removeAllRanges()")}} 用于取消选择。</p> + +<h4 id="HTML">HTML</h4> + +<pre><p id="p"><b>Use the buttons below</b> to select or deselect the contents of this paragraph.</p> +<button id="select-button">Select paragraph</button> +<button id="deselect-button">Deselect paragraph</button> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre>const p = document.getElementById('p'); +const selectButton = document.getElementById('select-button'); +const deselectButton = document.getElementById('deselect-button'); + +selectButton.addEventListener('click', e => { + // Clear any current selection + const selection = window.getSelection(); + selection.removeAllRanges(); + + // Select paragraph + const range = document.createRange(); + range.selectNodeContents(p); + selection.addRange(range); +}); + +deselectButton.addEventListener('click', e => { + const selection = window.getSelection(); + selection.removeAllRanges(); +});</pre> + +<h4 id="结果">结果</h4> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Live_sample" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Range/selectNodeContents$samples/Live_sample?revision=1566740"></iframe></p> + +<h2 id="Specification" name="Specification">规范</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', '#dom-range-selectnodecontents', 'Range.selectNodeContents()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>无变化</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNodeContents', 'Range.selectNodeContents()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初始规范</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Range.selectNodeContents")}}</p> + +<h2 id="参见"><span>参见</span></h2> + +<div id="compat-mobile"></div> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/setend/index.html b/files/zh-cn/web/api/range/setend/index.html new file mode 100644 index 0000000000..0a59945e12 --- /dev/null +++ b/files/zh-cn/web/api/range/setend/index.html @@ -0,0 +1,120 @@ +--- +title: Range.setEnd() +slug: Web/API/Range/setEnd +tags: + - 范围对象 +translation_of: Web/API/Range/setEnd +--- +<p><strong><code>Range.setEnd()</code></strong>方法用于设置 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Range" title="Range表示包含节点和部分文本节点的文档片段。"><code>Range</code></a>的结束位置。</p> + +<p> </p> + +<p>如果结束节点类型是 <code>Text</code>， <code>Comment</code>, or <code>CDATASection</code>之一, 那么 <code>endOffset指的是</code>从结束节点算起字符的偏移量。 对于其他 <code>Node</code> 类型节点， <code>endOffset</code>是指从结束结点开始算起子节点的偏移量。</p> + +<p>如果设置的结束点在起始点之上（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的结束位置。</p> + +<p> </p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>range</em>.setEnd(<em>endNode</em>, <em>endOffset</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em>endNode</em></dt> + <dd><em>endNode</em>用于设定 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Range" title="Range表示包含节点和部分文本节点的文档片段。"><code>Range</code></a>的结束位置。</dd> + <dt><em>endOffset</em></dt> + <dd>必须为不小于0的整数。表示从<em>endNode</em>的结束位置算起的偏移量。</dd> +</dl> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">var range = document.createRange(); +var endNode = document.getElementsByTagName("p").item(3); +var endOffset = endNode.childNodes.length; +range.setEnd(endNode, endOffset); +</pre> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-range-setend', 'Range.setEnd()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setEnd', 'Range.setEnd()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/setstart/index.html b/files/zh-cn/web/api/range/setstart/index.html new file mode 100644 index 0000000000..80c098ea98 --- /dev/null +++ b/files/zh-cn/web/api/range/setstart/index.html @@ -0,0 +1,112 @@ +--- +title: Range.setStart() +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +<p>{{ApiRef("DOM")}}</p> + +<p> <strong><code>Range.setStart()</code></strong> 方法用于设置 {{ domxref("Range") }}的开始位置。</p> + +<p>如果起始节点类型是 <code>Text</code>， <code>Comment</code>, or <code>CDATASection</code>之一, 那么 <code>startOffset指的是</code>从起始节点算起字符的偏移量。 对于其他 <code>Node</code> 类型节点， <code>startOffset</code> 是指从起始结点开始算起子节点的偏移量。</p> + +<p> 如果设置的起始位点在结束点之下（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的起始位置。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>); +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<dl> + <dt><em>startNode</em></dt> + <dd>{{ domxref("startNode") }} 用于设定 {{ domxref("Range") }}的起始位置。</dd> + <dt><em>startOffset</em><code> </code></dt> + <dd> 必须为不小于0的整数。表示从<code>startNode</code>的开始位置算起的偏移量。</dd> +</dl> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">var range = document.createRange(); +var startNode = document.getElementsByTagName("p").item(2); +var startOffset = 0; +range.setStart(startNode,startOffset); +</pre> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/setstartbefore/index.html b/files/zh-cn/web/api/range/setstartbefore/index.html new file mode 100644 index 0000000000..ea8321583f --- /dev/null +++ b/files/zh-cn/web/api/range/setstartbefore/index.html @@ -0,0 +1,62 @@ +--- +title: Range.setStartBefore() +slug: Web/API/Range/setStartBefore +translation_of: Web/API/Range/setStartBefore +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Range.setStartBefore()</code></strong> 方法相对另一个 {{domxref("Node")}}来设置一个{{domxref("Range")}} 的开始位置. {{domxref("Range")}}的开始节点（focusNode）的父节点，和 <code>referenceNode</code>的父节点是同一个.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>range</var>.setStartBefore(<em>referenceNode</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><em>referenceNode</em></dt> + <dd>一个{{domxref("Range")}}新的开始位置上的{{domxref("Node")}}.</dd> +</dl> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">var range = document.createRange(); +var referenceNode = document.getElementsByTagName("div").item(0); + +range.setStartBefore(referenceNode); +</pre> + +<h2 id="Specifications" name="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('DOM WHATWG', '#dom-range-setstartbefore', 'Range.setStartBefore()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-setStartBefore', 'Range.setStartBefore()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Range.setStartBefore")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/startcontainer/index.html b/files/zh-cn/web/api/range/startcontainer/index.html new file mode 100644 index 0000000000..d69c0baad6 --- /dev/null +++ b/files/zh-cn/web/api/range/startcontainer/index.html @@ -0,0 +1,107 @@ +--- +title: Range.startContainer +slug: Web/API/Range/startContainer +translation_of: Web/API/Range/startContainer +--- +<p> </p> + +<p> </p> + +<pre dir="ltr" id="tw-target-text">Range.startContainer是只读属性，返回Range开始的节点。要更改节点的起始位置，请使用Range.setStart（）方法。</pre> + +<p> </p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>startRangeNode</em> = <em>range</em>.startContainer; +</pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +startRangeNode = range.startContainer; +</pre> + +<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-range-startcontainer', 'Range.endContainer')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-startParent', 'Range.startContainer')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/startoffset/index.html b/files/zh-cn/web/api/range/startoffset/index.html new file mode 100644 index 0000000000..54cf5b8372 --- /dev/null +++ b/files/zh-cn/web/api/range/startoffset/index.html @@ -0,0 +1,64 @@ +--- +title: Range.startOffset +slug: Web/API/Range/startOffset +tags: + - API + - DOM + - Range + - 属性 +translation_of: Web/API/Range/startOffset +--- +<p>{{ ApiRef("Range") }}</p> + +<p><code><strong>Range.startOffset</strong></code> <span style="line-height: 1.5;">是一个只读属性，</span>用于返回一个表示<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">Range</code><span style="line-height: 1.5;"> 在 </span><code style="font-style: normal; line-height: 1.5;">startContainer</code><span style="line-height: 1.5;"> 中的起始位置的数字。</span></p> + +<p>如果 <code>startContainer</code> 是一个文本（{{domxref("Text")}}）、注释（{{domxref("Comment")}}）或者CDATA区块（{{domxref("CDATASection")}}）节点，那么返回的偏移量是从<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">startContainer</code><span style="line-height: 1.5;"> 开始到 </span><span style="line-height: 1.5;">{{domxref("Range")}} 的</span><span style="line-height: 1.5;">边界点的字符数量</span><span style="line-height: 1.5;">。对于其他的节点类型，</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">startOffset</code><span style="line-height: 1.5;"> 返回</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">startContainer</code><span style="line-height: 1.5;"> 到边界点的子节点数量。</span></p> + +<p><span style="line-height: 1.5;">可使用{{domxref("Range.setStart")}} 方法</span>改变<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">Range</code><span style="line-height: 1.5;"> </span>的<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">startOffset</code><span style="line-height: 1.5;"> 位置。</span></p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>startRangeOffset</em> = <em>range</em>.startOffset; +</pre> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +startRangeOffset = range.startOffset; +</pre> + +<h2 id="Specification" name="Specification">规范</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', '#dom-range-startoffset', 'Range.startOffset')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>无变化</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-startOffset', 'Range.startOffset')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初始规范</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Range.startOffset")}}</p> + +<h2 id="参见">参见</h2> + +<div id="compat-mobile"></div> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/zh-cn/web/api/range/surroundcontents/index.html b/files/zh-cn/web/api/range/surroundcontents/index.html new file mode 100644 index 0000000000..58695a43f4 --- /dev/null +++ b/files/zh-cn/web/api/range/surroundcontents/index.html @@ -0,0 +1,80 @@ +--- +title: Range.surroundContents +slug: Web/API/Range/surroundContents +tags: + - API + - DOM + - Range + - 方法 + - 范围 +translation_of: Web/API/Range/surroundContents +--- +<div>{{ ApiRef("Range") }}</div> + +<p><strong><code>Range.surroundContents()</code> </strong>方法将 {{ domxref("Range") }} 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。</p> + +<p>这个方法与 <code>newNode.appendChild(<a href="/en/DOM/range.extractContents" title="en/DOM/range.extractContents">range.extractContents()</a>); <a href="/en-US/docs/DOM/range.insertNode" title="/en-US/docs/DOM/range.insertNode">range.insertNode</a>(newNode)</code> 等价。应用以后， <code>newNode</code> 包含在 <code>range</code> 的边界点中。</p> + +<p>然而，如果 {{ domxref("Range") }} 断开了一个非 {{ domxref("Text") }} 节点，只包含了节点的其中一个边界点，就会抛出异常。也就是说，不像上述的等价方法，如果节点仅有一部分被选中，则不会被克隆，整个操作会失败。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>range</em>.surroundContents(<em>newParent</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>newParent</code></dt> + <dd>一个包含内容的 {{ domxref("Node") }}。</dd> +</dl> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre><span class="header-text">Put this in a headline</span></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre>const range = document.createRange(); +const newParent = document.createElement('h1'); + +range.selectNode(document.querySelector('.header-text')); +range.surroundContents(newParent);</pre> + +<h3 id="结果">结果</h3> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Range/surroundContents$samples/Example?revision=1549261"></iframe></p> + +<h2 id="Specification" name="Specification">规范</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', '#dom-range-surroundcontents', 'Range.surroundContents()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Range.surroundContents")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> |