range精讲

var ec = range.endContainer endContainer不是一个引用类型       range是引用类型
range经过改变范围之后
var ec2 =range.endContainer 这个container是一个全新的container 要重新获取,
这两个range内容已经不一样了

回车空格成为了文本节点
<p id="p1">
<b id="b1">Hello</b>
World</p>

 var p = document.getElementById("p1");
 var child = p.childNodes;
 var len = child.length;
 var a1 = child[0].nodeValue;  a1=“?"
 var a3 = child[2].nodeValue;  a3 = "?World"

1.selectNode
startOffset:选中节点在其父节点的字节点中索引的位置,兼容DOM的浏览器会将空格视为一个文本字节点,这个空格指索引是0的位置如果有空格就将其视为一个文本节点,在选区内部的空格不算,所以
<body> 空格                     这时startOffset是1
<p> 空格
<b>hello</b> 空格
world
</p>
</body>
<body><p>...</p></body>   这时startOffset是0
endOffset:startOffset+被选中节点的总数(从start
Offset开始到选区结尾的所有子节点个数)

commonAncestorContainer :startContainer,endContainer共同的父节点,最深的那一个,同时包含这两个节点的第一个元素

2.selectNodeCOntents
<body>
<p> 空格     这时startOffset是1
<b>hello</b> 空格
world
</p>
</body>

/*********************示例程序****************************/
window.onload = function(){
 var range = document.createRange(),
     range2 = document.createRange();
 var p = document.getElementById("p1");
 var child = p.childNodes;
 var len = child.length;
 var a1 = child[0].nodeValue;
 var a3 = child[2].nodeValue;

 range.selectNode(p);
 range2.selectNodeContents(p);
};
range:startOffset :1,endOffset:2
range2: startOffset:0,endOffset:3

<p id="p1">
<b id="b1">Hello</b>
World</p>
/*************************************************************/

range.detach();
range = null;
解除对范围的引用,使其从创建范围的文档中分离出来,从而让垃圾回收机制回收其内存

ec = range.endContainer
range.deleteContents();
range重置
以上两种情况range 发生了改变,但ec还是未改变之前的ec
range发生改变都不会影响ec和sc,因为它们是指向一个dom节点的指针,range的endContainer和startContainer会改变

sc === ec情况下,删除sc,ec并没有被删除

p =K(‘<P><br /></p>‘)
range.setStartAfter(p[0]).collapse(true);
  定位到p的前后任一位置,光标都显示

range.selectNodeContents 会添加&#8205 在表单序列化时容易出错 比如&#8205<br /> br就会被删掉
时间: 2024-10-06 01:22:47

range精讲的相关文章

专家精讲Oracle数据库管理与维护pdf

下载地址:网盘下载 编辑推荐 <专家精讲:ORACLE数据库管理与维护>适合数据库开发人员参考学习,也可作为高等院校相关专业师生的参考书. 作者简介 张天慧,现任职华硕集团昌硕科技(上海)有限公司DBA,曾任华硕电脑DBA.NCR专业顾问.台湾积体电路约聘DBA.远传电信DBA,以及和信电信DBA,具有美商甲骨文OCP(Oracle Certified Pro.fessional)认证资格,并拥有8年以上数据库开发与DBA经验.Oracle数据库管理.备份与复原.性能调优SQL Serve数据

20 考研英语题源外刊精讲赏析 1~10 期外刊原文+翻译+点评

打卡日期记录: ===========遗忘曲线记录====查词用浏览器:复习刷遍数,用电子版文件m====== 20 考研英语题源外刊精讲赏析1~10 期外刊原文+翻译+点评 01-<美国执业证照制度在阻碍竞争> 本文选自 The Economist<经济学人> 2018 年 2 月 17 日一篇题为 America should get rid ofoppressive job licensing(职业证照制度在阻碍竞争)的文章. 作者指出,美国的职业证照制度并不能保护消费者利益

第三百六十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mapping映射管理

第三百六十四节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)的mapping映射管理 1.映射(mapping)介绍 映射:创建索引的时候,可以预先定义字段的类型以及相关属性elasticsearch会根据json源数据的基础类型猜测你想要的字段映射,将输入的数据转换成可搜索的索引项,mapping就是我们自己定义的字段数据类型,同时告诉elasticsearch如何索引数据以及是否可以被搜索 作用:会让索引建立的更加细致和完善 类型:静态映射和动态

面试必看:java面试考点干货精讲视频教程

Java作为目前比较火的计算机语言之一,连续几年蝉联最受程序员欢迎的计算机语言榜首,因此每年新入职Java程序员也数不胜数.很多java程序员在学成之后,会面临着就业的问题.在面试的过程中,面试技巧是一项很重要的能力. 今天要给大家介绍的是一个java经典面试套路精讲视频教程,需要的朋友可以看看,希望能帮助到大家! 课程目录: 第一节. String Stringbuffer Stringbuilder 深度解析第二节. 完美回答面试题Int 与Integer的区别第三节. 以数据结构挖掘集合面

《Linux系统精讲》学习总结(二)

本次总结我将采取总结性,对比性的方式一目了然的展示出来,首先将所有的命令总结在一起,然后对比性的总结部分知识点,最后谈谈本周的学习体会. 一.Linux系统精讲常用命令 格式:命令作用 命令 :命令语法:#注释说明或者补充 例如:创建目录 mkdir:mkdir -m/p 目录名称: 创建目录 mkdir:mkdir -m/p 目录名称: 删除目录 rmdir:rmdir -m/p 目录名称: rm:  rm -r 目录名称= rmdir;  #系统会询问是否删除: rm -f 目录名称:  

iOS开发——语法篇OC篇&amp;高级语法精讲二

Objective高级语法精讲二 Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和转发.下面通过分析Apple开源的Runtime代码(我使用的版本是objc4-646.tar)来深入理解Objective-C的Runtime机制. Runtime数据结构 在Objective-C中,使用[receiver message]语法并不会马上执行receiver对象的message方

Oracle数据库精讲之数据库管理

Oracle数据库精讲之数据库管理 课程观看地址:http://www.xuetuwuyou.com/course/165 课程出自学途无忧网:http://www.xuetuwuyou.com 一.课程用到的软件:oracle 11g 二.课程目标: 1. 为有意从事oracle dba工作人员提供学习指导. 2. 提供oracle数据库dba日常管理方法. 3. 掌握oracle数据库体系机构,为oracle优化奠定基础. 三.适合人群: 1.有意从事oracle 数据库工作,担任dba角色

Spark全面精讲视频_Spark2.0视频

Spark全面精讲(基于Spark2版本+含Spark调优+超多案例) 课程观看地址:http://www.xuetuwuyou.com/course/149 课程出自学途无忧网:http://www.xuetuwuyou.com/ 课程分五个阶段,共115课时! 第一阶段 Spark内核深度剖析 第00节课-课程特色和学习方式 第一节课-Spark概述(四大特性) 第二节课-Spark入门 第三节课-什么是RDD? 第四节课-spark架构 第五节课-linux环境准备(虚拟机,linux)

第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现我的搜索以及热门搜索

第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)用Django实现我的搜索以及热门 我的搜素简单实现原理我们可以用js来实现,首先用js获取到输入的搜索词设置一个数组里存放搜素词,判断搜索词在数组里是否存在如果存在删除原来的词,重新将新词放在数组最前面如果不存在直接将新词放在数组最前面即可,然后循环数组显示结果即可 热门搜索实现原理,当用户搜索一个词时,可以保存到数据库,然后记录搜索次数,利用redis缓存搜索次数最到的词,过一段时间更新