From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/range/clonecontents/index.html | 64 ++++++++ files/zh-cn/web/api/range/clonerange/index.html | 104 +++++++++++++ files/zh-cn/web/api/range/collapse/index.html | 65 ++++++++ files/zh-cn/web/api/range/collapsed/index.html | 104 +++++++++++++ .../api/range/commonancestorcontainer/index.html | 58 ++++++++ .../api/range/createcontextualfragment/index.html | 60 ++++++++ .../zh-cn/web/api/range/deletecontents/index.html | 109 ++++++++++++++ files/zh-cn/web/api/range/endcontainer/index.html | 105 +++++++++++++ files/zh-cn/web/api/range/endoffset/index.html | 60 ++++++++ .../zh-cn/web/api/range/extractcontents/index.html | 60 ++++++++ .../web/api/range/getboundingclientrect/index.html | 90 ++++++++++++ .../zh-cn/web/api/range/getclientrects/index.html | 56 +++++++ files/zh-cn/web/api/range/index.html | 163 +++++++++++++++++++++ files/zh-cn/web/api/range/insertnode/index.html | 119 +++++++++++++++ .../zh-cn/web/api/range/intersectsnode/index.html | 56 +++++++ files/zh-cn/web/api/range/range/index.html | 119 +++++++++++++++ files/zh-cn/web/api/range/selectnode/index.html | 61 ++++++++ .../web/api/range/selectnodecontents/index.html | 105 +++++++++++++ files/zh-cn/web/api/range/setend/index.html | 120 +++++++++++++++ files/zh-cn/web/api/range/setstart/index.html | 112 ++++++++++++++ .../zh-cn/web/api/range/setstartbefore/index.html | 62 ++++++++ .../zh-cn/web/api/range/startcontainer/index.html | 107 ++++++++++++++ files/zh-cn/web/api/range/startoffset/index.html | 64 ++++++++ .../web/api/range/surroundcontents/index.html | 80 ++++++++++ 24 files changed, 2103 insertions(+) create mode 100644 files/zh-cn/web/api/range/clonecontents/index.html create mode 100644 files/zh-cn/web/api/range/clonerange/index.html create mode 100644 files/zh-cn/web/api/range/collapse/index.html create mode 100644 files/zh-cn/web/api/range/collapsed/index.html create mode 100644 files/zh-cn/web/api/range/commonancestorcontainer/index.html create mode 100644 files/zh-cn/web/api/range/createcontextualfragment/index.html create mode 100644 files/zh-cn/web/api/range/deletecontents/index.html create mode 100644 files/zh-cn/web/api/range/endcontainer/index.html create mode 100644 files/zh-cn/web/api/range/endoffset/index.html create mode 100644 files/zh-cn/web/api/range/extractcontents/index.html create mode 100644 files/zh-cn/web/api/range/getboundingclientrect/index.html create mode 100644 files/zh-cn/web/api/range/getclientrects/index.html create mode 100644 files/zh-cn/web/api/range/index.html create mode 100644 files/zh-cn/web/api/range/insertnode/index.html create mode 100644 files/zh-cn/web/api/range/intersectsnode/index.html create mode 100644 files/zh-cn/web/api/range/range/index.html create mode 100644 files/zh-cn/web/api/range/selectnode/index.html create mode 100644 files/zh-cn/web/api/range/selectnodecontents/index.html create mode 100644 files/zh-cn/web/api/range/setend/index.html create mode 100644 files/zh-cn/web/api/range/setstart/index.html create mode 100644 files/zh-cn/web/api/range/setstartbefore/index.html create mode 100644 files/zh-cn/web/api/range/startcontainer/index.html create mode 100644 files/zh-cn/web/api/range/startoffset/index.html create mode 100644 files/zh-cn/web/api/range/surroundcontents/index.html (limited to 'files/zh-cn/web/api/range') 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 +--- +

{{ APIRef("DOM") }}

+ +

Range.cloneContents() 返回一个 {{ domxref("DocumentFragment") }}，它是 {{ domxref("Range") }} 中所有的 {{ domxref("Node") }} 对象的副本。

+ +

使用" DOM 事件"添加的“事件侦听器”在克隆过程中不会被复制。 HTML属性事件与“DOM Core cloneNode”方法一样被复制。“HTML id属性”也将被克隆，这可能导致通过克隆导致无效的文档。

+ +

Partially selected nodes include the parent tags necessary to make the document fragment valid.

+ +

语法

+ +
documentFragment = range.cloneContents();
+
+ +

例子

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+documentFragment = range.cloneContents();
+document.body.appendChild(documentFragment);
+
+ +

 规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-clonecontents', 'Range.cloneContents()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-cloneContents', 'Range.cloneContents()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Range.cloneContents")}}

+ +

参考

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

Range.cloneRange()方法返回一个range对象，并且该对象的范围边界点与被克隆的range对象相同。

+ +

克隆的对象是复制过来的，而非引用，所以这两个对象双方各自做出的改变，都不会影响另一方。

+ +

语法

+ +
clone = range.cloneRange();
+
+ +

Example

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+clone = range.cloneRange();
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-clonerange', 'Range.cloneRange()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-clone', 'Range.cloneRange()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

See also

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Range.collapse() 方法向边界点折叠该 {{domxref("Range")}} 。

+ +

折叠后的 {{domxref("Range")}} 为空，不包含任何内容。

+ +

要确定 {{domxref("Range")}} 是否已折叠，使用{{domxref("Range.collapsed")}} 属性。

+ +

语法

+ +
range.collapse(toStart);
+
+ +

参数

+ +
+
toStart {{optional_inline}}
+
一个布尔值： true 折叠到 {{domxref("Range")}} 的 start 节点，false 折叠到 end 节点。如果省略，则默认为 false {{experimental_inline}}.
+
+ +

例子

+ +
var range = document.createRange();
+
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+range.collapse(true);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-collapse', 'Range.collapse()')}}{{Spec2('DOM WHATWG')}}The parameter is now optional and default to false.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-collapse', 'Range.collapse()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ +
{{Compat("api.Range.collapse")}}
+ +

参阅

+ + 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 +--- +
+

{{ APIRef("DOM") }}

+
+ +

 Range.collapsed 是只读属性。它返回一个 {{domxref("Boolean")}} 值表示是否起始点和结束点是同一个位置。 如果返回 true 表示{{domxref("Range")}} 的起始位置和结束位置重合, false 表示不重合。

+ +

 一个折叠的{{domxref("Range")}} 是空的，不包含内容，表示Dom树中的一个点。collapsed 属性是只读的。可以调用 {{domxref("Range.collapse()")}} 方法来折叠选区。

+ +

语法

+ +
isCollapsed = range.collapsed;
+
+ +

例子

+ +
var range = document.createRange();
+
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-collapsed', 'Range.collapsed')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-collapsed', 'Range.collapsed')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

参阅

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Range.commonAncestorContainer 只读属性，返回目标节点的共有祖先节点。因而需要注意：selectNode方法中的该值为目标节点的父节点，selectNodeContents方法中的该值为其本身。

+ +

在某些跨节点的选取操作时，取得最大"公约数"的节点为commonAncestorContainer。即{{domxref("Range.startContainer")}} 和 {{domxref("Range.endContainer")}} 相同的节点是目标节点的 共有祖先节点。

+ +

更改 {{domxref("Node")}}, 请使用setStart setEnd 及这两种方法的延伸方法 {{domxref("Range")}}.

+ +

语法

+ +
rangeAncestor = range.commonAncestorContainer;
+ +

示例

+ +
var range = document.createRange();
+
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+rangeAncestor = range.commonAncestorContainer;
+ +

特别说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-commonancestorcontainer', 'Range.commonAncestorContainer')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-commonParent', 'Range.commonAncestorContainer')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

支持度

+ + + +

{{Compat("api.Range.commonAncestorContainer")}}

+ +

更多

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Range.createContextualFragment() 方法通过以 range 的开头（选定节点的父级）作为上下文节点来调用 HTML 片段解析算法 或者 XML 片段解析算法来返回 {{domxref("DocumentFragment")}}。如果 range 属于一个其 HTMLness bit 被设置了的  {{domxref("Document")}} 则会应用 HTML 片段解析算法。在 HTML 的情况下，如果上下文节点为 html，由于历史原因，将使用 body 作为上下文来调用片段解析算法。

+ +

语法

+ +
documentFragment = range.createContextualFragment(tagString)
+
+ +

参数

+ +
+
tagString
+
包含要转换为文档片段的文本和标签的文本。
+
+ +

示例

+ +
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);
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#dom-range-createcontextualfragment', 'Range.createContextualFragment()')}}{{Spec2('DOM Parsing')}}Initial specification.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Range.createContextualFragment")}}

+ +

See also

+ + 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 +--- +

{{ApiRef("DOM")}}

+ +

Range.deleteContents() 移除来自 {{ domxref("Document") }}的{{ domxref("Range") }} 内容。

+ +

不像{{ domxref("Range.extractContents") }}一样，本方法不会返回一个包含删除内容的文本片段{{domxref("DocumentFragment")}} 。

+ +

语法

+ +
range.deleteContents()
+
+ +

例子

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.deleteContents();
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-range-deletecontents', 'Range.deleteContents()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-deleteContents', 'Range.deleteContents()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

参考

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Range.endContainer 是一个只读属性。它会返回{{domxref("Range")}}对象结束的{{domxref("Node")}}。如果要改变一个节点结束的位置，使用方法{{domxref("Range.setEnd()")}}或者相似的方法。

+ +

语法

+ +
endRangeNode = range.endContainer;
+
+ +

示例

+ +
var range = document.createRange();
+
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeNode = range.endContainer;
+
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-endcontainer', 'Range.endContainer')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-endParent', 'Range.endContainer')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器支持

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

相关链接

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

只读属性 Range.endOffset 返回代表 Range 结束位置在 {{domxref("Range.endContainer")}} 中的偏移值的数字。

+ +

如果 endContainer 的 {{domxref("Node")}} 类型为 {{domxref("Text")}}, {{domxref("Comment")}}，或 {{domxref("CDATASection")}}，偏移值是 endContainer 节点开头到 {{domxref("Range")}} 末尾的总字符个数。对其他类型的 {{domxref("Node")}} ， endOffset 指 endContainer 开头到 {{domxref("Range")}} 末尾的总 {{domxref("Node")}} 个数。如需修改 endOffset 的值， 使用 {{domxref("Range.setEnd")}} 方法。

+ +

语法

+ +
endRangeOffset = range.endOffset;
+
+ +

示例

+ +
var range = document.createRange();
+
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeOffset = range.endOffset;
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-endoffset', 'Range.endOffset')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-endOffset', 'Range.endOffset')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ +

{{Compat("api.Range.endOffset")}}

+ +

参见

+ + 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 +--- +

{{ApiRef("DOM")}}

+ +

Range.extractContents() 方法移动了{{ domxref("Range") }} 中的内容从文档树到{{ domxref("DocumentFragment") }}（文档片段对象）。

+ +

使用DOM事件添加的事件侦听器在提取期间不会保留。 HTML属性事件将按{{domxref("Node.cloneNode()")}}方法的原样保留或复制。 HTML id属性也会被克隆，如果提取了部分选定的节点并将其附加到文档中，则可能导致无效的文档。

+ +

克隆了部分选定的节点，以包括使文档片段有效所需的父标记。

+ +

Syntax

+ +
documentFragment = range.extractContents();
+
+ +

Example

+ +
var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var documentFragment = range.extractContents();
+document.body.appendChild(documentFragment);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ + + +

{{Compat("api.Range.extractContents")}}

+ + +

See also

+ + 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 +--- +
{{ApiRef("DOM")}}{{SeeCompatTable}}
+ +

Range.getBoundingClientRect() 返回一个 {{ domxref("DOMRect") }} 对象，该对象将范围中的内容包围起来；即该对象是一个将范围内所有元素的边界矩形包围起来的矩形（译者注：关于边界矩形，可以参考 Minimum Bouding Rectangles）。

+ +

此方法可用于确定文本区域中选中的部分或光标的视窗坐标。关于返回值的详细信息，参见 {{domxref("Element.getBoundingClientRect()")}}。

+ +

语法

+ +
boundingRect = range.getBoundingClientRect()
+
+ +

示例

+ +

HTML

+ +
<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>
+ +

CSS

+ +
#highlight {
+  background: yellow;
+  position: absolute;
+  z-index: -1;
+}
+
+p {
+  width: 200px;
+}
+ +

JavaScript

+ +
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`;
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}{{Spec2('CSSOM View')}}Initial specification.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Range.getBoundingClientRect")}}

+ +

参见

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Range.getClientRects() 方法返回一个 {{ domxref("DOMRect") }} 对象列表，表示 range 在屏幕上所占的区域。这个列表相当于汇集了范围中所有元素调用 {{ domxref("Element.getClientRects()") }} 方法所得的结果。

+ +

语法

+ +
rectList = range.getClientRects()
+
+ +

示例

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+rectList = range.getClientRects();
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSSOM View', '#dom-range-getclientrects', 'Range.getClientRects()')}}{{Spec2('CSSOM View')}}Initial specification.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Range.getClientRects")}}

+ +

参见

+ + 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 +--- +

{{ ApiRef() }}

+ +

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

+ +

可以用 {{domxref("Document")}} 对象的 {{domxref("Document.createRange")}} 方法创建 Range，也可以用 {{domxref("Selection")}} 对象的 {{domxref("Selection/getRangeAt", "getRangeAt")}} 方法获取 Range。另外，还可以通过 {{domxref("Document")}} 对象的构造函数 {{domxref("Range.Range()", "Range()")}} 来得到 Range。

+ +

属性

+ +
+
{{domxref("Range.collapsed")}} {{readonlyInline}}
+
返回一个表示 Range 的起始位置和终止位置是否相同的{{domxref("Boolean", "布尔值")}}。
+
{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}
+
返回完整包含 startContainer 和 endContainer 的、最深一级的{{ domxref("Node", "节点") }}。
+
{{domxref("Range.endContainer")}} {{readonlyInline}}
+
返回包含 Range 终点的{{ domxref("Node", "节点") }}。
+
{{domxref("Range.endOffset")}} {{readonlyInline}}
+
返回一个表示 Range 终点在 endContainer 中的位置的数字。
+
{{domxref("Range.startContainer")}} {{readonlyInline}}
+
返回包含 Range 开始的{{ domxref("Node", "节点") }}。
+
{{domxref("Range.startOffset")}} {{readonlyInline}}
+
返回一个表示 Range 起点在 startContainer 中的位置的数字。
+
+ +

构造器

+ +
+
{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}
+
返回一个以全局（global） {{domxref("Document")}} 作为起点与终点的 Range 对象。
+
+ +

方法

+ +

该接口没有继承的方法。

+ +

定位方法

+ +
+
{{ domxref("Range.setStart()")}}
+
设置 Range 的起点。
+
{{ domxref("Range.setEnd()")}}
+
设置 Range 的终点。
+
{{ domxref("Range.setStartBefore()")}}
+
以其它{{ domxref("Node", "节点") }}为基准，设置 Range 的起点。
+
{{ domxref("Range.setStartAfter()")}}
+
以其它{{ domxref("Node", "节点") }}为基准，设置 Range 的起点。
+
{{ domxref("Range.setEndBefore()")}}
+
以其它{{ domxref("Node", "节点") }}为基准，设置 Range 的终点。
+
{{ domxref("Range.setEndAfter()")}}
+
以其它{{ domxref("Node", "节点") }}为基准，设置 Range 的终点。
+
{{ domxref("Range.selectNode()")}}
+
使 Range 包含某个{{ domxref("Node", "节点") }}及其内容。
+
{{ domxref("Range.selectNodeContents()")}}
+
使 Range 包含某个{{ domxref("Node", "节点") }}的内容。
+
{{ domxref("Range.collapse()")}}
+
将 Range 折叠至其端点（boundary points，起止点，指起点或终点，下同）之一。
+
+ +

编辑方法

+ +

通过以下方法，可以从 Range 中获得节点，改变 Range 的内容。

+ +
+
{{ domxref("Range.cloneContents()")}}
+
返回一个包含 Range 中所有节点的{{ domxref("DocumentFragment", "文档片段") }}。
+
{{ domxref("Range.deleteContents()")}}
+
从{{ domxref("Document", "文档") }}中移除 Range 包含的内容。
+
{{ domxref("Range.extractContents()")}}
+
把 Range 的内容从文档树移动到一个{{ domxref("DocumentFragment", "文档片段") }}中。
+
{{ domxref("Range.insertNode()")}}
+
在 Range 的起点处插入一个{{ domxref("Node", "节点") }}。
+
{{ domxref("Range.surroundContents()")}}
+
将 Range 的内容移动到一个新的{{ domxref("Node", "节点") }}中。
+
+ +

其他方法

+ +
+
{{ domxref("Range.compareBoundaryPoints()")}}
+
比较两个 Range 的端点。
+
{{ domxref("Range.cloneRange()")}}
+
返回拥有和原 Range 相同的端点的克隆 Range 对象。
+
{{ domxref("Range.detach()")}}
+
将 Range 从使用状态中释放，改善性能。
+
{{ domxref("Range.toString()")}}
+
把 Range 的内容作为字符串返回。
+
+ +

Gecko 方法

+ +

下面的是 Mozilla 独有的、不被包含在 W3C DOM 标准中的 Range 方法。

+ +
+
{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}
+
返回一个常量，表示{{ domxref("Node", "节点") }}是否在 Range 的前、后、中、外。
+
{{ domxref("Range.comparePoint()")}} {{experimental_inline}}
+
返回 -1、0、1，分别表示指定点（point）位于 Range 的前、中、后。
+
{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}
+
解析指定字符串（格式为 XML 或 HTML），并返回一个{{ domxref("DocumentFragment", "文档片段") }}。
+
{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}
+
返回单个 {{ domxref("ClientRect") }} 对象，which bounds the entire contents of theRange; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.
+
{{ domxref("Range.getClientRects()") }} {{experimental_inline}}
+
返回一个 {{ domxref("ClientRect") }} 对象的列表，that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the Range.
+
{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}
+
返回{{domxref("Boolean", "布尔值")}}，表示指定{{ domxref("Node", "节点") }}是否横断 Range。
+
{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}
+
返回{{domxref("Boolean", "布尔值")}}，表示指定点是否位于 Range 之中。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}{{Spec2('DOM WHATWG')}}Do not use RangeException anymore, use DOMException instead.
+ Made the second parameter of collapse() optional.
+ Added the methods isPointInRange(), comparePoint(),  and intersectsNode().
+ Added the constructor Range().
{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('DOM Parsing')}}Added the method createContextualFragment().
{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('CSSOM View')}}Added the methods getClientRects() and getBoundingClientRect().
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Range")}}

+ +

参见

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Range.insertNode() 是在{{domxref("Range")}}的起始位置插入节点的方法。

+ +

新节点是插入在 the Range起始位置。如果将新节点添加到一个文本 {{domxref("节点")}}, 则该节点在插入点处被拆分，插入发生在两个文本节点之间

+ +

如果新节点是一个文档片段，则插入文档片段的子节点。

+ +

Syntax

+ +
range.insertNode(newNode);
+
+ +

Parameters

+ +
+
newNode
+
The {{domxref("Node")}} to insert at the start of the range.
+
+ +

Example

+ +
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);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}{{Spec2('DOM WHATWG')}}No change
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}}{{Spec2('DOM2 Traversal_Range')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatGeckoDesktop("14.0")}}[1]		9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}
+ {{CompatGeckoDesktop("14.0")}}[1]		9.09.0{{CompatVersionUnknown}}
+
+ +

[1] Prior to Gecko 14.0 {{geckoRelease("14.0")}}, this method had no effect on collapsed ranges. Now it behaves as per the specification.

+ +

See also

+ + 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 +--- +
{{ApiRef("DOM")}} {{SeeCompatTable}}
+ +

Range.intersectsNode() 方法返回一个布尔值，表明其给定的 {{domxref("Node")}} 节点是否与{{domxref("Range")}}的范围相交

+ +

Syntax

+ +
bool = range.intersectsNode( referenceNode )
+
+ +

Parameters

+ +
+
referenceNode
+
与{{domxref("Range")}}做比较的{{domxref("Node")}}节点
+
+ +

Example

+ +
var range = document.createRange();
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+var bool = range.intersectsNode(document.getElementsByTagName("p").item(0));
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-intersectsnode', 'Range.intersectNode()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Range.intersectsNode")}}

+ +

See also

+ + 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 +--- +

{{ APIRef("DOM") }}{{seeCompatTable}}

+ +

构造函数 Range() 返回一个新创建的 {{domxref("Range")}} 对象，新创建的对象属于全局 {{domxref("Document")}} 对象。

+ +

语法

+ +
range = new Range()
+ +

示例

+ +

在下面的例子中，我们通过构造函数Range()创建了一个新的range，并且使用{{domxref("Range.setStartBefore()")}} 和{{domxref("Range.setEndAfter()")}} 分别设置了起始位置。然后，通过方法{{domxref("window.getSelection()")}}和{{domxref("Selection.addRange()")}}选中了选区range。

+ +

HTML

+ +
<p>First paragraph.</p>
+<p>Second paragraph.</p>
+<p>Third paragraph.</p>
+<p>Fourth paragraph.</p>
+ +

JavaScript

+ +
const paragraphs = document.querySelectorAll('p');
+
+// 创建 Range 对象
+const range = new Range();
+
+// Range 起始位置在段落2
+range.setStartBefore(paragraphs[1]);
+
+// Range 结束位置在段落3
+range.setEndAfter(paragraphs[2]);
+
+// 获取 selection 对象
+const selection = window.getSelection();
+
+// 添加光标选择的范围
+selection.addRange(range);
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range', 'Range.Range()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
+
+ +

扩展

+ + 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 +--- +

{{ApiRef("DOM")}}

+ +

Range.selectNode() 方法将 {{domxref("Range")}} 设置为包含整个 {{domxref("Node")}} 及其内容。{{domxref("Range")}} 的起始和结束节点的父节点与 referenceNode 的父节点相同。

+ +

语法

+ +
range.selectNode(referenceNode);
+
+ +

参数

+ +
+
referenceNode
+
{{domxref("Range")}} 要包含的 {{domxref("Node")}}。
+
+ +

示例

+ +
var range = document.createRange();
+var referenceNode = document.getElementsByTagName("div").item(0);
+
+range.selectNode(referenceNode);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-range-selectnode', 'Range.selectNode()')}}{{Spec2('DOM WHATWG')}}无变化
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}}{{Spec2('DOM2 Traversal_Range')}}初始规范
+ +

浏览器兼容性

+ +

{{Compat("api.Range.selectNode")}}

+ +
+ +

参见

+ + 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 +--- +

{{ApiRef("DOM")}}

+ +

Range.selectNodeContents() 方法用于设置 {{ domxref("Range") }}，使其包含一个 {{ domxref("Node") }} 的内容。

+ +

{{ domxref("Range") }} 的起始和结束节点的父节点即为引用节点。 startOffset 为 0,  endOffset 则是引用节点包含的字符数或子节点个数。

+ +

语法

+ +
range.selectNodeContents(referenceNode);
+
+ +

参数

+ +
+
referenceNode
+
此 {{ domxref("Node") }} 中的内容被包含在 {{ domxref("Range") }} 中。
+
+ +

示例

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div")[0];
+range.selectNodeContents(referenceNode);
+
+ +

实时样例

+ +

这个例子让用户使用按钮选择或取消选择一个段落。{{domxref("Document.createRange()")}}、 Range.selectNodeContents() 和 {{domxref("Selection.addRange()")}} 用于选择内容。{{domxref("Window.getSelection()")}} 和 {{domxref("Selection.removeAllRanges()")}} 用于取消选择。

+ +

HTML

+ +
<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>
+
+ +

JavaScript

+ +
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();
+});
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-range-selectnodecontents', 'Range.selectNodeContents()')}}{{Spec2('DOM WHATWG')}}无变化
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNodeContents', 'Range.selectNodeContents()')}}{{Spec2('DOM2 Traversal_Range')}}初始规范
+ +

浏览器兼容性

+ +

{{Compat("api.Range.selectNodeContents")}}

+ +

参见

+ +
+ + 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 +--- +

Range.setEnd()方法用于设置 Range的结束位置。

+ +

 

+ +

如果结束节点类型是 Text， Comment, or CDATASection之一, 那么 endOffset指的是从结束节点算起字符的偏移量。 对于其他 Node 类型节点， endOffset是指从结束结点开始算起子节点的偏移量。

+ +

如果设置的结束点在起始点之上（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的结束位置。

+ +

 

+ +

语法

+ +
range.setEnd(endNode, endOffset);
+
+ +

参数

+ +
+
endNode
+
endNode用于设定 Range的结束位置。
+
endOffset
+
必须为不小于0的整数。表示从endNode的结束位置算起的偏移量。
+
+ +

例子

+ +
var range = document.createRange();
+var endNode = document.getElementsByTagName("p").item(3);
+var endOffset = endNode.childNodes.length;
+range.setEnd(endNode, endOffset);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-setend', 'Range.setEnd()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setEnd', 'Range.setEnd()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +

{{ApiRef("DOM")}}

+ +

 Range.setStart() 方法用于设置 {{ domxref("Range") }}的开始位置。

+ +

如果起始节点类型是 Text， Comment, or CDATASection之一, 那么 startOffset指的是从起始节点算起字符的偏移量。 对于其他 Node 类型节点， startOffset 是指从起始结点开始算起子节点的偏移量。

+ +

 如果设置的起始位点在结束点之下（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的起始位置。

+ +

语法

+ +
range.setStart(startNode, startOffset);
+
+ +

参数

+ +
+
startNode
+
{{ domxref("startNode") }} 用于设定 {{ domxref("Range") }}的起始位置。
+
startOffset 
+
 必须为不小于0的整数。表示从startNode的开始位置算起的偏移量。
+
+ +

例子

+ +
var range = document.createRange();
+var startNode = document.getElementsByTagName("p").item(2);
+var startOffset = 0;
+range.setStart(startNode,startOffset);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

参见

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

Range.setStartBefore() 方法相对另一个 {{domxref("Node")}}来设置一个{{domxref("Range")}} 的开始位置. {{domxref("Range")}}的开始节点（focusNode）的父节点，和  referenceNode的父节点是同一个.

+ +

Syntax

+ +
range.setStartBefore(referenceNode);
+
+ +

Parameters

+ +
+
referenceNode
+
一个{{domxref("Range")}}新的开始位置上的{{domxref("Node")}}.
+
+ +

Example

+ +
var range = document.createRange();
+var referenceNode = document.getElementsByTagName("div").item(0);
+
+range.setStartBefore(referenceNode);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-setstartbefore', 'Range.setStartBefore()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-setStartBefore', 'Range.setStartBefore()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ + + +

{{Compat("api.Range.setStartBefore")}}

+ +

See also

+ + 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 +--- +

 

+ +

 

+ +
Range.startContainer是只读属性，返回Range开始的节点。要更改节点的起始位置，请使用Range.setStart（）方法。
+ +

 

+ +

Syntax

+ +
startRangeNode = range.startContainer;
+
+ +

Example

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeNode = range.startContainer;
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-range-startcontainer', 'Range.endContainer')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-startParent', 'Range.startContainer')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

See also

+ + 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 +--- +

{{ ApiRef("Range") }}

+ +

Range.startOffset 是一个只读属性，用于返回一个表示 Range 在 startContainer 中的起始位置的数字。

+ +

如果 startContainer 是一个文本（{{domxref("Text")}}）、注释（{{domxref("Comment")}}）或者CDATA区块（{{domxref("CDATASection")}}）节点，那么返回的偏移量是从 startContainer 开始到 {{domxref("Range")}} 的边界点的字符数量。对于其他的节点类型， startOffset 返回 startContainer 到边界点的子节点数量。

+ +

可使用{{domxref("Range.setStart")}} 方法改变 Range 的 startOffset 位置。

+ +

语法

+ +
startRangeOffset = range.startOffset;
+
+ +

示例

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeOffset = range.startOffset;
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-range-startoffset', 'Range.startOffset')}}{{Spec2('DOM WHATWG')}}无变化
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-startOffset', 'Range.startOffset')}}{{Spec2('DOM2 Traversal_Range')}}初始规范
+ +

浏览器兼容性

+ +

{{Compat("api.Range.startOffset")}}

+ +

参见

+ +
+ + 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 +--- +
{{ ApiRef("Range") }}
+ +

Range.surroundContents() 方法将 {{ domxref("Range") }} 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。

+ +

这个方法与 newNode.appendChild(range.extractContents()); range.insertNode(newNode) 等价。应用以后， newNode 包含在 range 的边界点中。

+ +

然而，如果 {{ domxref("Range") }} 断开了一个非 {{ domxref("Text") }} 节点，只包含了节点的其中一个边界点，就会抛出异常。也就是说，不像上述的等价方法，如果节点仅有一部分被选中，则不会被克隆，整个操作会失败。

+ +

语法

+ +
range.surroundContents(newParent);
+
+ +

参数

+ +
+
newParent
+
一个包含内容的 {{ domxref("Node") }}。
+
+ +

示例

+ +

HTML

+ +
<span class="header-text">Put this in a headline</span>
+ +

JavaScript

+ +
const range = document.createRange();
+const newParent = document.createElement('h1');
+
+range.selectNode(document.querySelector('.header-text'));
+range.surroundContents(newParent);
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

浏览器兼容性

+ +

{{Compat("api.Range.surroundContents")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf