首页 > 代码库 > range精讲

range精讲

2024-08-21 20:31:05   222人阅读

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就会被删掉

 

 

range精讲


联系
我们