Dom range

最新推荐文章于 2024-10-07 09:24:46 发布
最新推荐文章于 2024-10-07 09:24:46 发布
阅读量123 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/LiuXianBlog/archive/2012/11/23/2785076.html
版权

在研究dom range的时候，发现了surroundContents()这个方法环绕范围添加内容。但是自己发现测试代码在chrome运行报错

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test javascript</title>
    <script type="text/javascript">
        window.onload = function() {
            var p1 = document.getElementById("p1");
            var helloNode = p1.firstChild.firstChild;
            var worldNode = p1.lastChild;
        
            var range = document.createRange();
            range.setStart(helloNode,2);
            range.setEnd(worldNode,5);
            
            var span = document.createElement("span");
            span.style.backgroundColor = "yellow";
        
            range.surroundContents(span);
        }
    </script>
    </head>
    <body id="body" >
        <h1>Test Javascript</h1>
        <p id="p1"><b>Hello </b>world!</p>
    </body>
</html>

 报错信息如下：

Uncaught Error: BAD_BOUNDARYPOINTS_ERR: DOM Range Exception 1

经过调试发现是因为在执行：

range.setStart(helloNode,2);
range.setEnd(worldNode,5);

时候range的范围中间包含了</b>标签，将range起止位置改变成如下便能解决问题：

range.setStart(helloNode,2);
range.setEnd(helloNode,5);

在使用surroundContents()的时候注意选择的范围是否跨越标签，或者说破坏了整个DOM的树形结构

转载于:https://www.cnblogs.com/LiuXianBlog/archive/2012/11/23/2785076.html

weixin_30547797
关注
DOM2中的Range
惊蛰小鱼的博客
07-15 340
DOM2 级在 Document 类型中定义了 createRange()方法。在兼容 DOM 的浏览器中，这个方法属于 document 对象。使用 hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围。 var supportsRange = document.implementation.hasFeature("Range", "2.0"); var alsoS...
DOM Range 介绍2
和谐的望天
11-15 843
本帖转自BlueDestiny前辈的BLOG：http://www.never-online.net/blog/article.asp?id=114复杂的DOM Range建立复杂的DOM range需要使用setStart()和setEnd()两个方法，这两个方法有两个参数：一个是一个节点(node)引用和一个偏移(offset)。setStart方法节点的引用是startContain
DOM Range 介绍3
和谐的望天
11-15 928
本帖转自BlueDestiny前辈的BLOG：http://www.never-online.net/blog/article.asp?id=115从Range中插入一些数据前一节的几个方法解决了如何移除range中所选中的fragment。现在说明如何添加内容到Range中。insertNode()方法可以插入一个节点到Range中。假如我想把以下的节点插如Range中，将如何操作呢？I
DOM 之Range(范围)
weixin_30735745的博客
10-06 351
-------《javascript高级程序设计》 12.4 范围 笔记------- DOM2级在Document类型中定义了createRange()方法，在兼容DOM的浏览器中，这个方法属于Document对象。可以使用HasFeature方法来检测浏览器是否支持范围 var supportsRange = document.implementation.hasFeature(‘R...
DOM Range 介绍1
和谐的望天
11-15 996
本帖转自BlueDestiny前辈的BLOG：http://www.never-online.net/blog/article.asp?id=1132级DOM定义了一个createRange()方法，如果是按照DOM此标准的浏览器（IE并不是支持此标准的，但是IE里的属性或方法却远比标准中定义的多得多），它属于document对象，所以创建一个range对象要这样做：var oRange
range-normalize:跨浏览器标准化DOM Range起始和结束容器
05-03
"range-normalize"是一个库，专门用于处理浏览器之间的DOM Range差异，确保在不同浏览器上的行为一致性。 DOM Range提供了一系列方法，如selectNode、selectNodeContents、setStart、setEnd等，让我们可以创建和...
Javascript标准DOM Range操作全集第1/3页
12-09
JavaScript中的DOM Range是用于在文档中创建和操作文本选择或范围的一个强大工具。在DOM2级规范中，Range对象提供了一系列方法和属性，允许开发者精确地控制文本的选择，包括选取文档中的特定部分、合并和拆分文本...
libRange:libRange 在 IE 8 及更早版本上模拟 W3C DOM Range API。 它基于 TinyMCE 的相同代码，但仅依赖于 jQuery（轻微）和 AMD 实现
07-08
libRange 在 IE 8 及更早版本上模拟 W3C DOM Range API。 它基于 TinyMCE 的相同代码，但仅依赖于 jQuery（轻微）和 AMD 实现。 libRange 还有一些在处理文本时很有用的实用方法，以及一些选择和范围记录方法。 ...
Cannot resolve a Slate range from DOM range:
05-19
这个错误通常发生在使用 Slate.js 编辑器时，当尝试将 DOM 范围转换为 Slate 范围时失败时出现。这可能是因为 DOM 范围与当前 Slate 编辑器的内容不兼容。 要解决这个问题，你可以尝试以下几点： 1. 确保你正在...
JS 之DOM range对象
u014644574的博客
02-21 832
DOM范围 DOM中的range对象是DOM2中新定义的接口。通过这个对象可以选择文档中的某个区域，而不必考虑节点的界限。 创建范围 document.createRange()创建一个范围，这个范围是range类型的实例。包含下面这些属性和方法。 startContainer：包含范围起点的节点（选区中第一个节点的父节点）。 startOffset：范围在startContain...
web dom api中的Selection和Range
嘿嘿
02-18 582
web dom api中的Selection和Range 如果你做过wysiwyg这样的app,一个很让人头疼的问题是如何保证执行bold,italic等格式化操作后保持先前鼠标所在的位置。要好好的解决这个问题，就必须将Selection和Range的api搞搞清楚。 https://javascript.info/selection-range Selection and Range js可以获得当前的选中区域信息，可以选择或者去选择部分或者全部内容，清楚document中的选中部分，使用一个心的
Dom Range-一个@功能的具体实现
jzlingmo的专栏
04-05 3598
浏览网页时，偶尔能看到选中某段文字能够进行分享或者按钮，这个就是用Range配合Selection来实现的，Selection即为当前选区，转换为Range对象就能对选区范围内的片段进行一系列操作，比如获取选区内的文本内容等等。Range及其使用简单来说，Range是html中的任意一段内容（fragment），用这玩意儿，可以让你来得到html中的任意部分。
range对象实现DOM精确操作
yfm120750310的博客
11-04 516
range对象实现DOM精确操作Range定义使用方法使用场景CSSOMDOM操作的实现case MDN接口文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Range Range定义 我们先来看下MDN对range对象的定义：Range 接口表示一个包含节点与文本节点的一部分的文档片段。 使用方法 我们可以用 Document 对象的 Document.createRange 方法创建 Range，也可以用 Selection 对象的 getRange
Range对象
一个有味道的Weber
09-29 2155
一、Range对象属性 属性值 说明 Range.collapsed 用于判断Range对象所代表的区域的开始点与结束点是否处于相同的位置，如果相同该属性值返回true Range.commonAncestorContainer 用于返回Range对象所代表的区域位于什么节点之中，该属性值为包含了该区域的最低层节点(一个节点可能是一个元素，也可能是一段完整文字)的节点 Ra
用 Range 实现 CSSOM 精准操作
三钻 - 之前端到全栈之路
12-17 613
这一部分的编程练习，我们来使用 `Range` 和 `CSSOM` 做一个综合练习。
Range的用法
maqingbin8888的专栏
07-05 710
Range的用法pom.xmlRange语法的使用场景判断给定值是否在范围中 pom.xml <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>18.0</version> </dependency> Range语法的使用 Range<Integer&gt
DOM-document.selection.createRange方法和TextRange对象
Ned_mahone的博客
04-07 3724
转自：http://blog.163.com/ruby_study/blog/static/238680065201611303416839/IE提供了Selection对象和TextRange对象用于实现对被选择内容进行修改以及在指定区域中进行查找。注：此对象应用于IE9版本以下，对于IE10及IE11，分别使用document.getSelection和window.getSelection来...
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1221
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值