createRange初探

最新推荐文章于 2024-07-18 14:03:51 发布

原创最新推荐文章于 2024-07-18 14:03:51 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #prototype #html #javascript #文档 #div

web&flash 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用Range对象在DOM中选择、删除、插入元素，并提供了与outerHTML和innerHTML操作类似的方法，同时解释了Range对象的selectNode和selectNodeContents的区别及其在不同场景下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Range 对象的一个代码片段，用createRange()来创建.ie浏览器目前暂不支持，我们要在firefox下使用。

obj.createRange();//这样就生成一个在obj文档的一个区域，所谓区域就是就是该文档的一部分，比如我们用鼠标选中文字或页面的一部分的时候，这就是区域的概念。通过创建range对象后，我们可以对该区域进行增删操作，也可以修改该区域的开始和结束范围等等。具体看下面的代码:

<div id="ok" style="width:100px;height:100px;border:1px solid"><p>h222222<b>ccccccc</b>tml</p><b>123456</b></div> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

另外还可以对range区域插入新内容;

var q = range.createContextualFragment('<a href="#">33</a>');//此方法根据给的html创建一个对象

range.insertNode(q);//在区域的开始位置插入q对象,这2句可以在上面的例子的最下面加入看效果

另外range对象还有2个方法介绍一下:

range.selectNode(o);//range的开始和结束范围是o对象的范围

range.selectNodeContents(o);//range的开始和结束是o对象的子对象的集合

如果我们在range.selectNode(o);//后做range.deleteContents();//那删除该块内容就等于删除了o对象的所有内容，我们再加入新内容:

var q = range.createContextualFragment('<select><option value="1">3ww</option>');
range.insertNode(q);

是不是感觉跟什么有些相似呢？对，就是ie里面的outerHTML;

function outerHTML(o,html){ var range = o.ownerDocument.createRange();//创建o对象的一个区域 range.selectNode(o);//选中所有包括o本身 range.deleteContents();//删除所有内容 var q = range.createContextualFragment(html); range.insertNode(q);//插入新内容 }

如果上面改成range.selectNodeContents(o);那就是实现了innerHTML了。

prototype1.5.0里面实现outerHTML是这样写的:

今天突然发现在最新的firefox里prototype的replace方法不能使用，看了一下关键代码如下:

var range = element.ownerDocument.createRange();
      range.selectNodeContents(element);//这句不知道为什么要加上
      element.parentNode.replaceChild(//父对象来操作，替换掉原来的element对象
        range.createContextualFragment(html.stripScripts()), element);
    }

range.selectNodeContents(element);这句不知道为什么要加上，选中element的子对象，后面再做替换？不知道在老的firefox里面是不是正常的，反正最新的4.01是不行的。把这行注释了便正常了。

range的其他知识这里就不再深入了，有兴趣的可以参考:

https://developer.mozilla.org/en/DOM/range

http://www.never-online.net/blog/article.asp?id=115