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

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

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

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

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

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

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

最新文章

  1. Oracle 数据库重放(Database Replay)功能演示
  2. php_access_ADOConn 备忘
  3. 【GoLang】GoLang UTF8 与 Unicode
  4. linux下的依赖关系
  5. Jquery:ajax跨域请求处理
  6. Intent传递对象的两种方法
  7. 用html5+js实现掌机游戏赛车demo
  8. VS2013 JS 跟踪
  9. (转载)linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结
  10. a链接中关于this的使用
  11. Can a Tomcat docBase span multiple folders?--转
  12. Jboss 集群配置
  13. 【Django】优化小技巧之清除过期session
  14. git无法添加文件夹
  15. python笔记:#014#综合应用
  16. 手动实现一个list的常用功能
  17. GitHub和Git(待补充)
  18. adobe cc最新版 软件安装与激活
  19. Spring Boot - 修改Tomcat默认的8080端口
  20. Nginx 代理

热门文章

  1. python 获取 mac 地址 的代码
  2. Python解析HTML的开发库pyquery
  3. linux 目录
  4. ASP.NET中利用Split实现对Checkbox的字符串分离放到DataTable里面
  5. Python的循环
  6. Go学习指南
  7. lnmp停用nginx,改用apache
  8. (菜鸟要飞系列)四,基于Asp.Net MVC5的后台管理系统(zTree绑定Json数据生成树)
  9. Ubuntu14.04下中山大学锐捷上网设置
  10. Codeforces Round #331 (Div. 2) C. Wilbur and Points