javascript中的范围选区

最新推荐文章于 2023-11-09 15:09:19 发布

出于蓝

最新推荐文章于 2023-11-09 15:09:19 发布

阅读量961

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/orq18810575870/article/details/79890181

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1 使用DOM范围实现简单的选择:

1.1 使用electNode()方法:

举个例子:

<!DOCTYPE html>
<html>
<body>
<p id="p1"><b>Hello</b> world!</p>
</body>
</html>

下面咱们来创建范围:

var range1 = document.createRange();
p1 = document.getElementById("p1");
range1.selectNode(p1);

1.2 使用electNodeContents()方法:

<!DOCTYPE html>
<html>
<body>
<p id="p1"><b>Hello</b> world!</p>
</body>
</html>

创建范围:

var range2 = document.createRange();
p1 = document.getElementById("p1");
range2.selectNodeContents(p1);

两者范围比较:

2使用DOM范围实现复杂的选择:

要创建复杂的选择,就得使用setStart()和setEnd()方法.两个方法都接受两个参数:一个参照节点和一个偏移量值。对setStart()来说，参照节点会变成startContainer，而偏移量值会变成startOffset。对于setEnd()来说，参照节点会变成endContainer，而偏移量值会变成endOffset。

举个例子:

var range1 = document.createRange();
range2 = document.createRange();
p1 = document.getElementById("p1");
p1Index = -1;
i, len;
for (i=0, len=p1.parentNode.childNodes.length; i < len; i++) {
if (p1.parentNode.childNodes[i] == p1) {
p1Index = i;
break;
}
}
range1.setStart(p1.parentNode, p1Index);
range1.setEnd(p1.parentNode, p1Index + 1);
range2.setStart(p1, 0);
range2.setEnd(p1, p1.childNodes.length);

也就是说,要选择当前节点,就必须知道他在父节点的索引,参数是父节点和索引值

但是如果要选择节点的内容的话,就可以不用计算索引值,参数是改节点和选择的长度

两个例子都说明了,参数是选择内容的父节点,和选择的长度.

出于蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中的范围选区

1 使用DOM范围实现简单的选择:1.1 使用electNode()方法:举个例子:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;&lt;p id="p1"&gt;&lt;b&gt;Hello&lt;/b&gt; world!&lt;/p&gt;&lt;/body&gt;&lt;/html&g
复制链接

扫一扫