JS 之DOM range对象

àì夳堔傛蜴生んèń 2023-10-07 09:41 1阅读 0赞

**DOM范围**

DOM中的range对象是DOM2中新定义的接口。通过这个对象可以选择文档中的某个区域，而不必考虑节点的界限。

**创建范围**

**document.createRange()**创建一个范围，这个范围是range类型的实例。包含下面这些属性和方法。

startContainer：包含范围起点的节点（选区中第一个节点的父节点）。

startOffset：范围在startContainer中起点的偏移量。

endContainer：包含范围终点的节点（选区中最后一个节点的父节点）。

endOffset：范围在endContainer中终点的偏移量。

**范围选择**

**selectNode()和selectNodeContents()**方法用来选择文档中的某一部分。

var range = document.createRange();

range.selectNode(node) 参数为node节点，把整个node节点的信息，包括子节点中的内容填充到范围range内。

range.selectNodeContents(node) 参数为node节点，把node节点的子节点信息填充到范围range内。

**操作范围**

在创建范围时，内部会为这个范围创建一个文档片段，范围所属的全部节点会被添加到这个文档片段中。创建范围后，就可以对范围的的内容进行操作了。

**deleteContents()**：从文档中彻底删除范围所包含的内容。

var sec1 = document.getElementById('sec1');
    
    var range = document.createRange();
    range.selectNode(sec1);
    range.deleteContents();   //删除sec1节点

**extractContents()**：从文档中移除范围选区。这个方法的返回值是移除的片段，利用这个返回值，可以把这个片段插入到页面的其他地方。

var sec1 = document.getElementById('sec1');
    var sec2 = document.getElementById('sec2');
    
    var range = document.createRange();
    range.selectNode(sec1);      //创建范围的内容
    var fragment = range.extractContents();       //从文档中移除范围选区
    sec2.parentNode.appendChild(fragment);      //在页面的某处插入范围中被移除的节点

**cloneRange()**：复制范围，创建调用它的范围的副本。

var newRange = range.cloneRange();

**detach()**：从范围文档中分类该范围，也就是清理范围。

range.detach();

range = null;

**IE中的范围**

IE不支持DOM的range范围，但是支持textRange文本范围，文本范围主要处理的是文本。

**创建范围**

**document.body.createTextRange();**

**范围选择**

**findText()**方法：找到第一次出现的给定文本，并将范围移过来环绕文本。如果找到文本返回true，否则返回false.

eg:

var range = document.body.createTextRange();

var isFound = range.findText('aa'); //如何找到返回true，否则返回false

var text = range.text //输出aa

与DOM中selectNode()方法最接近的是**moveToElementText()**,接受一个参数：节点名。选择这个节点的所有内容填充到范围里。

**操作范围**

在IE中，操作范围中的内容可以使用**text属性和pasteHTML()**方法。通过text属性可以取得范围中的内容文本，也可以通过这个属性来设置内容文本。要向范围中插入html代码，则使用pasteHTML()方法。

**duplicate()**：复制文本范围。创建原范围的一个副本。

总结自：《javascript 高级程序设计》

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS高级——DOM对象

DOM对象 1. dom简介目标了解dom的概念了解dom树的概念讲解 dom树：当一个网页被浏览器加载到内存中之后，会按照dom

蔚落/ 2024年04月01日 12:49/ 0 赞/ 69 阅读

相关 JS 之DOM range对象

DOM范围 DOM中的range对象是DOM2中新定义的接口。通过这个对象可以选择文档中的某个区域，而不必考虑节点的界限。创建范围 document.createRan

àì夳堔傛蜴生んèń/ 2023年10月07日 09:41/ 0 赞/ 2 阅读

相关 js之操作DOM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔情只为你懂/ 2023年07月11日 12:56/ 0 赞/ 2 阅读

相关 js之DOM简介

1 什么是 DOM 1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。 2）DOM 是一个与平台和编程语言无关的接口，通过这个接

偏执的太偏执、/ 2022年11月22日 12:48/ 0 赞/ 145 阅读

相关 Range对象介绍

在web中有个不常用，但挺强大的一个对象Range。他表示一个包含节点与文本节点的一部分的文档片段。 1、创建Range实例有三种办法可以得到一个Range, 一旦一

阳光穿透心脏的1/2处/ 2022年11月11日 13:18/ 0 赞/ 140 阅读

相关 range 对象

今天在工作中做项目为了模拟微信评论，使用了h5的新属性`contenteditable="true"`，使得div和p标签可以像input和textarea标签一样编辑。但是问

古城微笑少年丶/ 2022年09月25日 08:18/ 0 赞/ 145 阅读

相关 html5之Range对象详解

一：Range对象的概念 Range对象代表页面上一段连续的区域，通过Range对象可以获取或者修改页面上任何区域的内容。也可以通过Range的方法进行复制和移动页面任何

约定不等于承诺〃/ 2022年06月10日 05:11/ 0 赞/ 351 阅读

相关 Dom对象,js对象和jquery对象的区别

第一篇写的很详细可惜不能转载，记下地址： [https://blog.csdn.net/kuangdacaikuang/article/details/72235747][h

痛定思痛。/ 2022年05月26日 00:56/ 0 赞/ 253 阅读

相关 DOM对象、js对象、jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别一、DOM对象文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。 1. DOM实际上是以

Dear 丶/ 2022年05月15日 08:27/ 0 赞/ 321 阅读

相关 JS Range 对象的使用

一：什么是Range对象 Range是指html文档中的区域，如用户用鼠标拖动选中的区域，如下图： ![在这里插入图片描述][20190308160538842.png]

分手后的思念是犯贱/ 2022年03月14日 18:56/ 0 赞/ 266 阅读