发布于 2016-08-21 06:47:01 | 135 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程,程序狗速度看过来!
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
<p><span>文字</span>^<span>文字</span></p>
<p><span>文字</span><span>01234^567</span></p>
document.selection.createRange()
oControlRange = object.createControlRange()
前一种 之能在 body,element上调用,而后一种 可在大多数元素上调用。调用后则该范围完全覆盖调用元素。相当于 moveToElementText 。
textrange 标准化:
<span>文^字</span>
^<span>文字</span>^
有了上面的5个方法就可以开始我们的标准化第一步:获取位置,首先给出操作例子:
(绿块表示文字节点,注意:正常手工编写页面情况下不会出现两个相邻的文字节点,这里使用 splitText 强制分离 )
当我们将选择区域collapse后,可能有上述四个位置:1,2,3,4,其中 1,4 相邻元素节点最简单:
1,4位置 标准化:
1.根据 parentElement 得到包含位置的节点 p ,即为该位置的container
2.对container的所有元素子节点,一一验证是否和已知位置相邻,验证方法即为:通过 moveToElementText 新建range包围子节点,再通过 compareEndPoints 比较是否新建 range 的前后位置是否和当前位置重合:
range = range.duplicate();
range.collapse(start);
var parent = range.parentElement(),
siblings = parent.childNodes;
for (var i = 0; i < siblings.length; i++) {
var child = siblings[i];
if (child.nodeType == 1) {
var tr = range.duplicate();
tr.moveToElementText(child);
//子元素节点开始位置比较
var comparisonStart = tr.compareEndPoints('StartToStart', range),
//子元素节点结束位置比较
comparisonEnd = tr.compareEndPoints('EndToStart', range);
//开头已经在当前位置后面,没必要继续比了
if (comparisonStart > 0) break;
else if (!comparisonStart || comparisonEnd == 1 && comparisonStart == -1) return {
container: parent,
offset: i
};
else if (!comparisonEnd) return {
container: parent,
offset: i + 1
};
}
}
<p id="test"><strong>粗体</strong>普通|文字<i>斜体</i></p>
<script>
document.getElementById("test").childNodes[1].splitText(2);
</script>
controlrange 标准化
controlrange 就很简单了,由 item(index) 方法得到选择元素,结合其parentNode 就可以得到标准化表示了。
PS : 关于输入框的范围读取
由于规范规定输入框的选择区域和页面选择区域是分离的,输入框的选择区域有不同的获取方式 (IE 基本相同)。