range精讲

65 阅读 0 评论 43 点赞

我是靠谱客的博主耍酷大碗，最近开发中收集的这篇文章主要介绍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就会被删掉