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. protected internal修饰符

    见过这样的修饰符,但是没有仔细考虑过,今天做一个小练习. 先给出一个链接,别人在网上讨论的:http://wenku.baidu.com/view/4023f65abe23482fb4da4cfe.h ...

  2. gcc链接程序时出现undefined reference to""错误

    如:: undefined reference to ‘mq_unlink',意思是指函数mq_unlink没有定义. 可以使用如下步骤找到该函数所在的库: 1).查找哪些库包含了或使用了该函数:gr ...

  3. Python解析HTML的开发库pyquery

    PyQuery是一个类似于jQuery的Python库,也可以说是jQuery在Python上的实现,能够以 jQuery 的语法来操作解析 HTML 文档,易用性和解析速度都很好. 例如,一段豆瓣h ...

  4. 全民wifi钓鱼来临----agnes安卓wifi钓鱼神器介绍

    断断续续搞了一些无线的东西,从bt5的aircrack-ng的破无线(没怎么成功过)其实EWSA这个用GPU跑还算不错,可惜了我这显卡也只能每秒2500,到用c118在OsmocomBB基础上进行gs ...

  5. WPF 系统托盘 图标闪烁

    WPF消息通知 系统托盘,图标闪烁 using System.Windows.Forms; using System.Windows.Threading; public partial class W ...

  6. WPF学习01:初始XAML浅析

    本文内容: 浅析WPF应用默认创建的XAML中元素.attributes. 新建WPF工程“HelloWPF”. 初始创建的主窗体XAML代码如下: <Window x:Class=" ...

  7. String面试题

    //a b c 分别是怎么存储的, a和b a和c分别有什么区别// c和d的区别是什么 String a= "hello";String b= "hello" ...

  8. Linq to XML 之XElement的Descendants方法的新发现

    C#操作XML的方法有很多,但个人认为最方便的莫过于Linq to XML了,特别是XElement的Descendants方法是我最常用的一个方法. 这个方法可以根据节点名(Name)找到当前调用的 ...

  9. win下php5.5.12装不上memcache扩展

    WAMP这个集成环境里,php目录下有个php.ini,apache/bin下也有一个php.ini,环境使用的是apache下的,改apache

  10. D3js

    http://d3js.org http://blog.csdn.net/lzhlzz/article/details/27497157