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 会添加‍ 在表单序列化时容易出错 比如‍<br /> br就会被删掉
range精讲的更多相关文章
- iOS CAShapeLayer精讲
前言 CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性.但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义. 关于UIBezierPath,请阅读文章:i ...
- 第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询
第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询 1.elasticsearch(搜索引擎)的查询 elasticsearch是功能 ...
- 第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求
第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...
- Gradle系列之一 Groovy语法精讲
Gradle技术之一 Groovy语法精讲 gradle脚本是基于groovy语言开发的,想要学好gradle必须先要对groovy有一个基本的认识 1. Groovy特点 groovy是一种DSL语 ...
- 深入Java核心 Java内存分配原理精讲
深入Java核心 Java内存分配原理精讲 栈.堆.常量池虽同属Java内存分配时操作的区域,但其适用范围和功用却大不相同.本文将深入Java核心,详细讲解Java内存分配方面的知识. Java内存分 ...
- WKWebView API精讲(OC)
WKWebView API精讲(OC) 前言 鉴于LL同志对笔者说:“能不能写个OC版本的WKWebView的使用教程?”,还积极打赏了30RMB,笔者又怎么好意思拒绝呢,于是才有了下文. 所有看到本 ...
- 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记
VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...
- iOS开发——语法篇OC篇&高级语法精讲二
Objective高级语法精讲二 Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和 ...
- iOS开发——语法篇OC篇&高级语法精讲
高级语法精讲 一.NSSet.NSMutableSet集合的介绍 1)NSSet.NSMutableSet集合,元素是无序的,不能有重复的值. 2)用实例方法创建一个不可变集合对象 例如: //宏定义 ...
随机推荐
- iOS Socket/Tcp编程 GCDAsyncSocket的实战(带回调)
很多同学一听到Socket TCP UDP 这几个字眼感觉特别害怕,很怕在工作当中使用,因为他们太底层了.下面我把我在工作中使用Socket类库GCDAsyncSocket进行一次实战 文章中只适用于 ...
- gcc使用备忘
本文为原创文章,转载请指明该文链接 Options Controling the kind of Output -x language 明确说明输入文件的编码语言,没有该选项的话, gcc 会根据输入 ...
- 虚机下Ubuntu与Win7文件共享
使用Samba服务实现虚机与本机的文件共享,简单的分为以下几个步骤,按部就班,so easy 1.安装smb sudo apt-get install samba sudo apt-get insta ...
- hadoop_百科
一.发音是:[hædu:p]. 二.简介:Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储 ...
- PHP抓取网络数据
涉及到的知识点不多 file_get_contents:读取数据: preg_match_all:正则匹配: 和匹配之后的数据分析. 不同网页所需要抓取的数据是不同的,所以正则表达式自然也不一样,针对 ...
- dropdown多选下拉框
写好了一个dropdown多选框.直接粘下面代码就能用 效果展示: temp2.jsp <%@page import="com.util.LabelCacheManager" ...
- web.xml文件:
在web.xml配置文件是一个的J2EE配置文件,决定如何处理HTTP请求servlet容器的元素.它不是严格意义上的Struts2的配置文件,但它是一个文件,需要配置Struts2的工作. 正如前面 ...
- 目标跟踪之klt---光流跟踪法
近来在研究跟踪,跟踪的方法其实有很多,如粒子滤波(pf).meanshift跟踪,以及KLT跟踪或叫Lucas光流法,这些方法各自有各自的有点,对于粒子滤波而言,它能够比较好的在全局搜索到最优解,但其 ...
- selenium+testng+reportng+ant+jenkins集成日记
1.新建一个项目 2.编写测试脚本 3.配置ant的build.xml脚本 4.集成到jenkins,并运行 1.新建项目 注意jdk的版本要一致 eclipse Window --Prefer ...
- js创建对象的最佳方式
1.对象的定义 ECMAScript中,对象是一个无序属性集,这里的“属性”可以是基本值.对象或者函数 2.数据属性与访问器属性 数据属性即有值的属性,可以设置属性只读.不可删除.不可枚举等等 访问器 ...