JS 之DOM range对象
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对象的更多相关文章
- XML DOM - Range 对象
Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象 在IE中使用TextRange对象 range对象常用的建立方法在开发中 ...
- JS HTML DOM 事件对象(onclick、onmouseenter)
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM: ...
- js HTML DOM TableRow 对象(innerHTML)
TableRow 对象 TableRow 对象代表一个 HTML 表格行. 在 HTML 文档中 <tr> 标签每出现一次,一个 TableRow 对象就会被创建. TableRow 对象 ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery对象与JS原生dom对象之间的转换
jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...
- js常用内置对象、Dom对象、BOM对象
11.html元素事件属性中,如onclick="",双引号里可以是方法条用,可以是js代码(无需加<script>标签) 12.JavaScript内置 对象.属性和 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- 继续JS之DOM对象二
前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...
随机推荐
- 如何创建可扩展表视图中的iOS 学习和拓展优化(有待更新)
首先介绍老外的文章:<How To Create an Expandable Table View in iOS>这是老外用Swift实现 的,对应的老外github项目源码:https: ...
- postfix删除队列中的邮件
Postfix中有一套Mail Queue Management机制,所有队列中的邮件都可以全自动的处理,但在发送大量邮件的时候,有必要对这个队列进行手工的维护处理,比如说,删除队列中的邮件. 以下是 ...
- "ORA-12154: TNS:could not resolve the connect identifier specified"的解决办法
添加环境变量解决: 变量名:TNS_ADMIN 变量值:D:\Ocl\product\11.2.0\dbhome_1\NETWORK\ADMIN tnsnames.ora所在的路径
- Redis的数据类型及操作
Strings 最简单的类型,一个Key对应一个Value,string类型是二进制安全的.Redis的string可以包含任何数据,如图片或序列化的对象 操作 Set:设置key对应的值为strin ...
- 第二篇 :微信公众平台开发实战Java版之开启开发者模式,接入微信公众平台开发
第一部分:微信公众号对接的基本介绍 一.填写服务器配置信息的介绍 登录微信公众平台官网后,进入到公众平台后台管理页面. 选择 公众号基本设置->基本配置 ,点击“修改配置”按钮,填写服务器地址( ...
- TCP/IP详解--TCP首部选项中时间戳选项
一.简介 TCP时间戳选项会在TCP包头增加12个字节,以一种比重发超时更精确的方法来启用对RTT 的计算. 二.作用 ) TCP时间戳位于TCP选项中,kind=:lenth=:data由tim ...
- linux命令后台运行
有两种方式: 1. command & : 后台运行,你关掉终端会停止运行 2. nohup command & : 后台运行,你关掉终端也会继续运行 一. 简介 Lin ...
- .net framework 4.6.2 下载
.net framework .net framework版本: 4.6.2 File Name: NDP462-KB3151800-x86-x64-AllOS-ENU.exe 发布日期: 201 ...
- OpenXml 入门----OpenXml Tools使用技巧
简介: Office2007以上版本的文档其实可以转换为XML格式.截图如下: Test.doc 解压过后已经完全变为文件夹和xml文件,文档的属性和信息都存储在了xml里面.根据XML就封装出了Op ...
- Android组件---四大布局的属性详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...