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

HTML5 编辑 API 之 Range 对象(二)的更多相关文章

  1. HTML5 编辑 API 之 Range 对象(一)

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

  2. HTML5编辑API之Range对象

    Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRa ...

  3. HTML5 页面编辑API之Range对象

    在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...

  4. [html5] 学习笔记- 编辑API之Range对象(二)

    本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...

  5. [html5] 学习笔记-编辑 API 之 Range 对象(一)

    1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...

  6. html5学习笔记5--API Range对象(二)

    Range对象之cloneRange和cloneContents 代码效果如下 首次点击“选择内容“按钮提示如下 接着会显示 最后显示 以下为整个代码 <!DOCTYPE html> &l ...

  7. html5学习笔记4--API Range对象(一)

    Range对象基本用法 效果图如下(在谷歌浏览器下的展示)

  8. [H5]API之range对象

    range对象:是一种fragment(HTML片断),它包含了节点或文本节点的一部分.一般情况下,同一时刻页面中只可能 有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏 ...

  9. web前端学习(二)html学习笔记部分(3)--range对象

    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...

随机推荐

  1. php中echo、print、print_r、printf的返回值

    1.echo 无返回值,是一个语言结构.在输出多个参数时不可以使用小括号; 2.print返回值为1:如:$x = 0; echo print $x."<br/>";/ ...

  2. 下拉刷新--第三方开源--PullToRefresh

    效果预览图: 下载地址:https://github.com/chrisbanes/Android-PullToRefresh activity_main.xml: <RelativeLayou ...

  3. liunx下vi命令详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  4. C#项目连接数据库的配置

    一:C# 连接SQL数据库    1.用SqlServer数据库,windows身份验证模式<add name="TestSqlSqever" providerName=&q ...

  5. sqlchemy - day3

         session 直接上代码,创建表结构,初始化部分数据. from sqlalchemy import create_engine engine = create_engine(" ...

  6. Python中Cookie的处理(二)cookielib库

    Python中cookielib库(python3中为http.cookiejar)为存储和管理cookie提供客户端支持. 该模块主要功能是提供可存储cookie的对象.使用此模块捕获cookie并 ...

  7. c#中的类型转换

    Parse类型转换 Parse()函数 int.double都能调用Parse()函数,Parse(string str);如果转换成功就成功,失败就会抛出一个异常; TryParse()函数 相应地 ...

  8. Infobright高性能数据仓库

    1.  概述 Infobright是一款基于独特的专利知识网格技术的列式数据库.Infobright简单易用,快速安装部署,使用中无需复杂操作,能大幅度减少管理工作:在应对50TB甚至更多数据量进行多 ...

  9. 用Redis bitmap统计活跃用户、留存

    Spool的开发者博客,描述了Spool利用Redis的bitmaps相关的操作,进行网站活跃用户统计工作. 原文:http://blog.getspool.com/2011/11/29/fast-e ...

  10. C# 清楚Cookies

    //销毁Cookies中的数据 if (Request.Cookies["Ticket"] != null) { HttpCookie mycookie; mycookie = R ...