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 高级程序设计》

JS 之DOM range对象的更多相关文章

  1. XML DOM - Range 对象

    Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域.   dom标准Range对象 在IE中使用TextRange对象 range对象常用的建立方法在开发中 ...

  2. JS HTML DOM 事件对象(onclick、onmouseenter)

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM:  ...

  3. js HTML DOM TableRow 对象(innerHTML)

    TableRow 对象 TableRow 对象代表一个 HTML 表格行. 在 HTML 文档中 <tr> 标签每出现一次,一个 TableRow 对象就会被创建. TableRow 对象 ...

  4. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  5. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  7. js常用内置对象、Dom对象、BOM对象

    11.html元素事件属性中,如onclick="",双引号里可以是方法条用,可以是js代码(无需加<script>标签) 12.JavaScript内置 对象.属性和 ...

  8. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  9. 继续JS之DOM对象二

    前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...

随机推荐

  1. 如何创建可扩展表视图中的iOS 学习和拓展优化(有待更新)

    首先介绍老外的文章:<How To Create an Expandable Table View in iOS>这是老外用Swift实现 的,对应的老外github项目源码:https: ...

  2. postfix删除队列中的邮件

    Postfix中有一套Mail Queue Management机制,所有队列中的邮件都可以全自动的处理,但在发送大量邮件的时候,有必要对这个队列进行手工的维护处理,比如说,删除队列中的邮件. 以下是 ...

  3. "ORA-12154: TNS:could not resolve the connect identifier specified"的解决办法

    添加环境变量解决: 变量名:TNS_ADMIN 变量值:D:\Ocl\product\11.2.0\dbhome_1\NETWORK\ADMIN tnsnames.ora所在的路径

  4. Redis的数据类型及操作

    Strings 最简单的类型,一个Key对应一个Value,string类型是二进制安全的.Redis的string可以包含任何数据,如图片或序列化的对象 操作 Set:设置key对应的值为strin ...

  5. 第二篇 :微信公众平台开发实战Java版之开启开发者模式,接入微信公众平台开发

    第一部分:微信公众号对接的基本介绍 一.填写服务器配置信息的介绍 登录微信公众平台官网后,进入到公众平台后台管理页面. 选择 公众号基本设置->基本配置 ,点击“修改配置”按钮,填写服务器地址( ...

  6. TCP/IP详解--TCP首部选项中时间戳选项

    一.简介 TCP时间戳选项会在TCP包头增加12个字节,以一种比重发超时更精确的方法来启用对RTT 的计算.   二.作用 ) TCP时间戳位于TCP选项中,kind=:lenth=:data由tim ...

  7. linux命令后台运行

    有两种方式: 1. command & : 后台运行,你关掉终端会停止运行    2. nohup command & : 后台运行,你关掉终端也会继续运行 一. 简介     Lin ...

  8. .net framework 4.6.2 下载

    .net framework   .net framework版本: 4.6.2 File Name: NDP462-KB3151800-x86-x64-AllOS-ENU.exe 发布日期: 201 ...

  9. OpenXml 入门----OpenXml Tools使用技巧

    简介: Office2007以上版本的文档其实可以转换为XML格式.截图如下: Test.doc 解压过后已经完全变为文件夹和xml文件,文档的属性和信息都存储在了xml里面.根据XML就封装出了Op ...

  10. Android组件---四大布局的属性详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...