Dom range

在研究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的树形结构

posted @ 2012-11-23 21:39  Kevin Liu Blog  阅读(285)  评论(0)    收藏  举报