HTML5 编辑 API 之 Range 对象(二)
2015-12-29 20:30
691 查看
1.Range.cloneContents()
The Range.cloneContents() returns a DocumentFragment copying the objects of type Node included in the Range.
Syntax
documentFragment = range.cloneContents();
Example
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229195007557-50652320.png)
2.Range.cloneRange()
The Range.cloneRange() method returns a Range object with boundary points identical to the cloned Range.
The returned clone is copied by value, not reference, so a change in either Range does not affect the other.
Syntax
clone = range.cloneRange();
Example
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
clone = range.cloneRange();
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229010401776-227833835.png)
3.Range.extractContents()
The Range.extractContents() method moves contents of the Range from the document tree into a DocumentFragment.
Event Listeners added using DOM Events are not retained during extraction. HTML attribute events are retained or duplicated as they are for the Node.cloneNode() method. HTML id attributes are also cloned, which can lead to an invalid document if a partially-selected node is extracted and appended to the document.
Partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid.
Syntax
documentFragment = range.extractContents();
Example
var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.extractContents();
document.body.appendChild(documentFragment);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229195632620-815795567.png)
4.insertNode
The Range.insertNode() method inserts a node at the start of the Range
The new node is inserted at the start boundary point of the Range. If the new node is to be added to a text Node, that Node is split at the insertion point, and the insertion occurs between the two text nodes.
If the new node is a document fragment, the children of the document fragment are inserted instead.
Syntax
range.insertNode(newNode);
Parameters
newNode
The 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);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229200501854-81851229.png)
5.compareBoundaryPoints
The Range.compareBoundaryPoints() method compares the boundary points of the Range with another one.
Syntax
compare = range.compareBoundaryPoints(how, sourceRange);
Return value
compare
A number, -1, 0, or 1, indicating whether the corresponding boundary-point of the Range is respectively before, equal to, or after the corresponding boundary-point of sourceRange.
Parameters
how
A constant describing the comparison method:
Range.END_TO_END compares the end boundary-point of sourceRange to the end boundary-point of Range.
Range.END_TO_START compares the end boundary-point of sourceRange to the start boundary-point of Range.
Range.START_TO_END compares the start boundary-point of sourceRange to the end boundary-point of Range.
Range.START_TO_START compares the start boundary-point of sourceRange to the start boundary-point of Range.
If the value of the parameter is invalid, a DOMException with a NOT_SUPPORTED_ERR code is thrown.
sourceRange
A Range to compare boundary points with the range.
Example
var range, sourceRange, compare;
range = document.createRange();
range.selectNode(document.getElementsByTagName("div")[0]);
sourceRange = document.createRange();
sourceRange.selectNode(document.getElementsByTagName("div")[1]);
compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229202132792-2049746763.png)
6.collapse
The Range.collapse() method collapses the Range to one of its boundary points.
A collapsed Range is empty, containing no content, specifying a single-point in a DOM tree. To determine if a Range is already collapsed, see the Range.collapsed property.
Syntax
range.collapse(toStart);
Parameters
toStart Optional
A boolean value: true collapses the Range to its start, false to its end. If omitted, it defaults to false .
Example
var range = document.createRange();
referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
range.collapse(true);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229202707589-1521925738.png)
7.detach
The Range.detach() method releases a Range from use. This lets the browser choose to release resources associated with this Range. Subsequent attempts to use the detached range will result in a DOMException being thrown with an error code of INVALID_STATE_ERR.
Syntax
range.detach();
Example
var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
range.detach();
The Range.cloneContents() returns a DocumentFragment copying the objects of type Node included in the Range.
Syntax
documentFragment = range.cloneContents();
Example
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229195007557-50652320.png)
2.Range.cloneRange()
The Range.cloneRange() method returns a Range object with boundary points identical to the cloned Range.
The returned clone is copied by value, not reference, so a change in either Range does not affect the other.
Syntax
clone = range.cloneRange();
Example
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
clone = range.cloneRange();
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229010401776-227833835.png)
3.Range.extractContents()
The Range.extractContents() method moves contents of the Range from the document tree into a DocumentFragment.
Event Listeners added using DOM Events are not retained during extraction. HTML attribute events are retained or duplicated as they are for the Node.cloneNode() method. HTML id attributes are also cloned, which can lead to an invalid document if a partially-selected node is extracted and appended to the document.
Partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid.
Syntax
documentFragment = range.extractContents();
Example
var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.extractContents();
document.body.appendChild(documentFragment);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229195632620-815795567.png)
4.insertNode
The Range.insertNode() method inserts a node at the start of the Range
The new node is inserted at the start boundary point of the Range. If the new node is to be added to a text Node, that Node is split at the insertion point, and the insertion occurs between the two text nodes.
If the new node is a document fragment, the children of the document fragment are inserted instead.
Syntax
range.insertNode(newNode);
Parameters
newNode
The 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);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229200501854-81851229.png)
5.compareBoundaryPoints
The Range.compareBoundaryPoints() method compares the boundary points of the Range with another one.
Syntax
compare = range.compareBoundaryPoints(how, sourceRange);
Return value
compare
A number, -1, 0, or 1, indicating whether the corresponding boundary-point of the Range is respectively before, equal to, or after the corresponding boundary-point of sourceRange.
Parameters
how
A constant describing the comparison method:
Range.END_TO_END compares the end boundary-point of sourceRange to the end boundary-point of Range.
Range.END_TO_START compares the end boundary-point of sourceRange to the start boundary-point of Range.
Range.START_TO_END compares the start boundary-point of sourceRange to the end boundary-point of Range.
Range.START_TO_START compares the start boundary-point of sourceRange to the start boundary-point of Range.
If the value of the parameter is invalid, a DOMException with a NOT_SUPPORTED_ERR code is thrown.
sourceRange
A Range to compare boundary points with the range.
Example
var range, sourceRange, compare;
range = document.createRange();
range.selectNode(document.getElementsByTagName("div")[0]);
sourceRange = document.createRange();
sourceRange.selectNode(document.getElementsByTagName("div")[1]);
compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229202132792-2049746763.png)
6.collapse
The Range.collapse() method collapses the Range to one of its boundary points.
A collapsed Range is empty, containing no content, specifying a single-point in a DOM tree. To determine if a Range is already collapsed, see the Range.collapsed property.
Syntax
range.collapse(toStart);
Parameters
toStart Optional
A boolean value: true collapses the Range to its start, false to its end. If omitted, it defaults to false .
Example
var range = document.createRange();
referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
range.collapse(true);
![](http://images2015.cnblogs.com/blog/653056/201512/653056-20151229202707589-1521925738.png)
7.detach
The Range.detach() method releases a Range from use. This lets the browser choose to release resources associated with this Range. Subsequent attempts to use the detached range will result in a DOMException being thrown with an error code of INVALID_STATE_ERR.
Syntax
range.detach();
Example
var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
range.detach();
相关文章推荐
- HTML5.Canvas绘图
- HTML5的新特性
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
- web图形方案比较html5、GML、SVG、VML
- 外行学html5 - emmet 使用
- 40 个重要的 HTML5 面试问题及答案
- 开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了!
- html5游戏引擎推荐
- HTML5 <meta> 标签属性
- HTML5:footer定位(底部+居中)的探讨+div图片居中问题
- HTML5实现多文件的上传示例代码
- 为什么年轻人挣得很多还是穷?北上广深挑战指数报告~
- HTML5 <script>元素async,defer异步加载
- HTML5知识初级题目
- HTML5 input placeholder 颜色修改示例
- HTML5 编辑 API 之 Range 对象(一)
- HTML5 postMessage 跨域交换数据
- HTML5 增强的页面元素
- HTML5 Canvas
- 【2015.12.28】html5新增的属性