HTML5 编辑 API 之 Range 对象(二)
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 对象(二)的更多相关文章
- HTML5 编辑 API 之 Range 对象(一)
一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...
- HTML5编辑API之Range对象
Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = document.createRa ...
- HTML5 页面编辑API之Range对象
在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...
- [html5] 学习笔记- 编辑API之Range对象(二)
本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...
- [html5] 学习笔记-编辑 API 之 Range 对象(一)
1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...
- html5学习笔记5--API Range对象(二)
Range对象之cloneRange和cloneContents 代码效果如下 首次点击“选择内容“按钮提示如下 接着会显示 最后显示 以下为整个代码 <!DOCTYPE html> &l ...
- html5学习笔记4--API Range对象(一)
Range对象基本用法 效果图如下(在谷歌浏览器下的展示)
- [H5]API之range对象
range对象:是一种fragment(HTML片断),它包含了节点或文本节点的一部分.一般情况下,同一时刻页面中只可能 有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏 ...
- web前端学习(二)html学习笔记部分(3)--range对象
1.2.8 html5编辑api之range对象(一) 1.2.8.1 Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...
随机推荐
- Android little error records
1:在清单文件(Manifest)中加入权限时要注意,如下例: <uses-permission android:name="android.permission.CHANGE_NET ...
- C string 函数大全
PS:本文包含了大部分strings函数的说明,并附带举例说明.本来想自己整理一下的,发现已经有前辈整理过了,就转了过来.修改了原文一些源码的问题,主要是用char *字义字符串的问题,导致程序运行时 ...
- 如何取消FLEX里模态窗口的毛玻璃效果
在Flex里面,比如使用PopUpManager.createPopUp(this,TipWindow,false)第三个参数设成true 会出现毛玻璃效果让CPU飙升,可不可以改变模态窗口的效果,不 ...
- Nginx 老是抢先捕获了404 我想这个404我Yii项目来处理 要怎么配置?
配置Nginx vhost的时候别指定error_page 它就不会跟Yii抢生意了 or 你弄一个frontendController 然后再里面 加上 $user->loginRequi ...
- php中const与define的使用区别 详解
1.const用于类成员变量定义,一旦定义且不能改变其值.define定义全局常量,在任何地方都可以访问. 2.define不能在类中定义而const可以. 3.const不能在条件语句中定义常量 i ...
- kendo ui template的用法
kendo ui template的用法: Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的H ...
- NSRange、NSPoint(CGPoint)、NSSize(CGSize)、NSRect(CGRect)
1.NSRange: typedef struct _NSRange { NSUInteger location; NSUInteger length; } NSRange; NSRange本身是系统 ...
- Useful related java API for Android
Language_suport and Other Language-Oriented API: strings,exceptions, threads, #java.lang.* offers th ...
- Ext学习-HelloWorld以及基础环境搭建
1.目的 在eclipse中搭建EXTJS的基础环境,学习如何按照从官方下载的代码中搭建新的Extjs工程 2.主要包含内容: 1.ExtJS文件下载以及目录说明 2.ExtJS开发环境 ...
- Why am I able to change the contents of const char *ptr?
http://stackoverflow.com/questions/3228664/why-am-i-able-to-change-the-contents-of-const-char-ptr I ...