文档章节

Range的学习笔记

前端届的科比
 前端届的科比
发布于 2014/11/24 09:23
字数 801
阅读 400
收藏 8

介绍DOM标准的Range和IE标准的Range。前者针对节点,后者针对文本。虽然少用,但可以了解下。


/**
 * DOM标准的Range
 */

// 创建范围
var range = document.createRange();

// 选择dom作为范围
range.selectNode(dom);

// 选择dom的内容/子节点作为范围
range.selectNodeContents(dom);

// 将范围起点设置在dom之前
range.setStartBefore(dom);

// 将范围起点设置在dom之后
range.setStartAfter(dom);

// 将范围终点设置在dom之前
range.setEndBefore(dom);

// 将范围终点设置在dom之后
range.setEndAfter(dom);

// 直接设置范围起点
// @param dom: startContainer。参数1,引用的节点,作为范围的startContainer
// @param offset: startOffset。参数2,起点偏移量
range.setStart(startContainer, startOffset);

// 直接设置范围终点
range.setEnd(endContainer, endOffset);

// 删除范围里的内容
range.deleteContents();

// 删除范围里的内容,并将该内容返回
range.extractContents();

// 创建范围里内容的副本
range.cloneContents();

// 插入包围范围的内容
// @param dom: 要包围范围内容的节点
// 1.抽取范围里的内容,类似extractContents()
// 2.将dom插入范围原所在位置
// 3.将文档碎片内容添加到dom中
range.surroundContents(dom);

// 清空范围,但并不删除内容,也叫折叠范围
range.collapse(true); // true就折叠在范围的开头,false就结尾
range.collapsed;      // 返回是否已被折叠了

// 比较DOM范围,compareBoundaryPoints()
// 如果第一个范围被测点在第二个范围被测点之前,返回-1;相同则返回0;如果在之后返回1
// START_TO_START(0), START_TO_END(1), END_TO_START(2), END_TO_END(3)
range1.compareBoundaryPoints(Range.START_TO_START,range2);

// 复制范围
var rangeCloned = range.cloneRange();

// 清理并销毁范围
range.detach();


/**
 * IE标准的Range
 * 在IE下,范围主要是针对文本,而不是DOM标准下的节点
 */

// 创建文本范围
// 创建的元素必须是<body/>,<button/>,<input/>,<textarea/>,而不是document
// <body/>创建的范围能在任何位置使用,其他元素创建的只能在内部使用
var range = document.body.createTextRange();

// 通过给定文本来指定范围
var found = range.findText('hello'); // 发现的第一个实例
var foundAgain = range.findText('hello', 1); // 正数表示搜索继续往前,负数表示往回搜索

// 选择特定dom的文本,包括HTML标签,类似DOM下的selectNode()
range.moveToElementText(dom);
alert(range.htmlText);

// parentElement(),类似DOM的commonAncestorContainer
var commonAncestor = range.parentElement();

// 在前面创建简单选区后,可使用move(), moveStart(), moveEnd(), expand()来进一步给范围定位
// 这些方法都接受两个参数:移动的单位和移动的单位个数
// 单位包括:'character', 'word', 'sentence', 'textedit'
range.moveStart('word', 2);
range.moveEnd('character', 1);
range.move('character', 5); // move()会先折叠范围,再移动,移动后必须再调用moveStart(),moveEnd()

// 与范围进行交互
range.text = 'hello2';
range.pasteHTML('<em>hello3</em>'); // 注意使用pasteHTML中的HTML语法正确

// 折叠范围
range.collapse(true); // true|false与DOM标准的一样

// 是否已折叠,是用boundingWidth,返回范围宽度的像素值
// 还有boundingHeight, boundingTop, boundingLeft
var isCollapsed = 0 === range.boundingWidth;

// 比较范围,类似DOM的compareBoundingPoints()
// 参数值:'StartToStart', 'StartToEnd', 'EndToEnd', 'EndToStart'
range1.compareEndPoints('StartToStart', range2);

range1.isEqual(range2); // 范围1是否与范围2完全一样
range1.inRange(range2); // 范围1包含范围2,范围2在范围1内部

// 创建范围副本
var rangeCloned = range.duplicate();

© 著作权归作者所有

上一篇: resources_plugins
前端届的科比
粉丝 21
博文 64
码字总数 51572
作品 0
深圳
私信 提问
Guava学习笔记:Range

  在Guava中新增了一个新的类型Range,从名字就可以了解到,这个是和区间有关的数据结构。从Google官方文档可以得到定 义:Range定义了连续跨度的范围边界,这个连续跨度是一个可以比较的类...

pior
2015/03/31
0
0
Go圣经-学习笔记之方法值和表达式

上一篇 Go圣经-学习笔记之封装还是组合 下一篇 Go圣经-学习笔记之接口 方法值和方法表达式 了解过前面的函数值用法,应该就会使用方法值,在方法值中,接收者对象成为了引用环境中的参数变量...

cdh0805010
2017/10/27
0
0
Go基础 - 3 条件语句

判断语句if 选择语句switch 循环语句 for 遍历 range 跳转语句goto, break, continue 支持函数内部 goto 跳转, continue 进入一下次循环,break 终止循环 break 和 continue 都可以配合标签,...

winnie_5d76
2017/11/29
0
0
云计算技术之数据结构笔记

云计算技术之数据结构笔记。 #python是数据结构笔记一 #引入:以一道题来展示 #如果a+b+c = 1000,且a^2+b^2 = c^2(a,b,c为自然数),求a,b,c可能的组合 #解析: #枚举法 #思路: #a=0...... #...

寂灭的博客
2017/12/18
0
0
学习笔记(10月25日)--python的if、while、for语法

二周三次课(10月25日) 1.学习python特殊的缩进和语法 python的缩进和冒号 python之所以如此简单,归功于他的缩进机制,严格的缩进机制使得代码非常整齐规范,赏心悦目,提高了可读性,在一...

wanyang_wanyang
2018/07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

URL/URI/URN的认识

这两天在写代码的时候,由于涉及到资源的位置,因此,需要在Java Bean中定义一些字段,用来表示资源的位置,比如:imgUrl,logoUri等等。但是,每次定义的时候,心里都很纠结,是该用imgUrl还...

WinkJie
17分钟前
0
0
vs2017 踩坑

好久没有使用vs2017,改了下代码,启动调试进行测试,一没有注意,就启动了。 然后 ,悲剧了,,,就有下面的问题。 VS断点提示:当前不会命中断点。还没有为该文档加载任何符号 然后百度了下,...

轻轻的走过
18分钟前
1
0
解决一个emqttd trace 无法打开的问题

emqttd这个东西做的真心不咋地,之前有emq_auth_mysql的plugin死活无法启动的问题,现在又碰到trace无法打开的问题。 查看emqttd服务器当前连接的所有client: emqttd_ctl clients list 要打...

莫在全
25分钟前
1
0
java wsdl 中不显示参数属性类型的问题解决方案

CXF3.0.1解决方案: 配合spring方式 <jaxws:endpoint id="receiveUMSMessageService" implementor="com.sw.extInterface.webservice.service.impl.ReceiveUMSMessageServiceImpl" address="......

嘿嘿嘿IT
28分钟前
0
0
go alpine docker image 搭建

Dockerfile 搭建 目录结构 --Dockerfile--main.go 写一个go的helloworld package mainimport ("fmt""log""net/http")func main() {http.HandleFunc("/", hello)err := ht......

solate
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部