Range的学习笔记
为什么80%的码农都做不了架构师?>>>
介绍DOM标准的Range和IE标准的Range。前者针对节点,后者针对文本。虽然少用,但可以了解下。
/*** DOM标准的Range*/// 创建范围
var range = document.createRange();// 选择dom作为范围
range.selectNode(dom);// 选择dom的内容/子节点作为范围
range.selectNodeContents(dom);// 将范围起点设置在dom之前
range.setStartBefore(dom);// 将范围起点设置在dom之后
range.setStartAfter(dom);// 将范围终点设置在dom之前
range.setEndBefore(dom);// 将范围终点设置在dom之后
range.setEndAfter(dom);// 直接设置范围起点
// @param dom: startContainer。参数1,引用的节点,作为范围的startContainer
// @param offset: startOffset。参数2,起点偏移量
range.setStart(startContainer, startOffset);// 直接设置范围终点
range.setEnd(endContainer, endOffset);// 删除范围里的内容
range.deleteContents();// 删除范围里的内容,并将该内容返回
range.extractContents();// 创建范围里内容的副本
range.cloneContents();// 插入包围范围的内容
// @param dom: 要包围范围内容的节点
// 1.抽取范围里的内容,类似extractContents()
// 2.将dom插入范围原所在位置
// 3.将文档碎片内容添加到dom中
range.surroundContents(dom);// 清空范围,但并不删除内容,也叫折叠范围
range.collapse(true); // true就折叠在范围的开头,false就结尾
range.collapsed; // 返回是否已被折叠了// 比较DOM范围,compareBoundaryPoints()
// 如果第一个范围被测点在第二个范围被测点之前,返回-1;相同则返回0;如果在之后返回1
// START_TO_START(0), START_TO_END(1), END_TO_START(2), END_TO_END(3)
range1.compareBoundaryPoints(Range.START_TO_START,range2);// 复制范围
var rangeCloned = range.cloneRange();// 清理并销毁范围
range.detach();/*** IE标准的Range* 在IE下,范围主要是针对文本,而不是DOM标准下的节点*/// 创建文本范围
// 创建的元素必须是<body/>,<button/>,<input/>,<textarea/>,而不是document
// <body/>创建的范围能在任何位置使用,其他元素创建的只能在内部使用
var range = document.body.createTextRange();// 通过给定文本来指定范围
var found = range.findText('hello'); // 发现的第一个实例
var foundAgain = range.findText('hello', 1); // 正数表示搜索继续往前,负数表示往回搜索// 选择特定dom的文本,包括HTML标签,类似DOM下的selectNode()
range.moveToElementText(dom);
alert(range.htmlText);// parentElement(),类似DOM的commonAncestorContainer
var commonAncestor = range.parentElement();// 在前面创建简单选区后,可使用move(), moveStart(), moveEnd(), expand()来进一步给范围定位
// 这些方法都接受两个参数:移动的单位和移动的单位个数
// 单位包括:'character', 'word', 'sentence', 'textedit'
range.moveStart('word', 2);
range.moveEnd('character', 1);
range.move('character', 5); // move()会先折叠范围,再移动,移动后必须再调用moveStart(),moveEnd()// 与范围进行交互
range.text = 'hello2';
range.pasteHTML('<em>hello3</em>'); // 注意使用pasteHTML中的HTML语法正确// 折叠范围
range.collapse(true); // true|false与DOM标准的一样// 是否已折叠,是用boundingWidth,返回范围宽度的像素值
// 还有boundingHeight, boundingTop, boundingLeft
var isCollapsed = 0 === range.boundingWidth;// 比较范围,类似DOM的compareBoundingPoints()
// 参数值:'StartToStart', 'StartToEnd', 'EndToEnd', 'EndToStart'
range1.compareEndPoints('StartToStart', range2);range1.isEqual(range2); // 范围1是否与范围2完全一样
range1.inRange(range2); // 范围1包含范围2,范围2在范围1内部// 创建范围副本
var rangeCloned = range.duplicate();
转载于:https://my.oschina.net/luozt/blog/348052
Range的学习笔记相关推荐
- 图像处理(二十四)Gradient Domain High Dynamic Range Compression学习笔记
<Gradient Domain High Dynamic Range Compression>学习笔记 原文地址: 作者:hjimce 一.相关理论 本篇博文主要讲解基于梯度域编辑的HD ...
- Python学习笔记——for循环和range函数
Python学习笔记--for循环和range函数 Python的for循环 for 目标 in 表达式 :循环体 案例一 >>> example = 'abcdef' >&g ...
- Python 学习笔记 列表 range() xxx XXX
Python 学习笔记 列表 range() xxx XXX print("-" * 30) for value in range(1, 5):print(value)number ...
- PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 知识图谱学习笔记(1)
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
- Numpy学习笔记(下篇)
目录 Numpy学习笔记(下篇) 一.Numpy数组的合并与分割操作 1.合并操作 2.分割操作 二.Numpy中的矩阵运算 1.Universal Function 2.矩阵运算 3.向量和矩阵运算 ...
- 笔记 | 吴恩达Coursera Deep Learning学习笔记
向AI转型的程序员都关注了这个号☝☝☝ 作者:Lisa Song 微软总部云智能高级数据科学家,现居西雅图.具有多年机器学习和深度学习的应用经验,熟悉各种业务场景下机器学习和人工智能产品的需求分析.架 ...
- 一文弄懂元学习 (Meta Learing)(附代码实战)《繁凡的深度学习笔记》第 15 章 元学习详解 (上)万字中文综述
<繁凡的深度学习笔记>第 15 章 元学习详解 (上)万字中文综述(DL笔记整理系列) 3043331995@qq.com https://fanfansann.blog.csdn.net ...
- python可视化:matplotlib学习笔记
信息可视化是数据分析的一块重要内容.这是一个探索性的过程.比如说,可以帮助我们坚定离群值,或者必要的数据转换,又或者是构建一个理想的模型.对于其他的一些领域,也可以进行web可视化.Python有许多 ...
- Python基础语法学习笔记
Python基础语法学习笔记 想淘宝省钱看我简介,博客www.liangxin.name (一) 一.Print()函数 1.数字可以直接输出,无需加引号 只能理解数字,却读不懂文字.因为数字和数学运 ...
最新文章
- 干货丨一文看懂人工智能、机器学习和深度学习的区别与联系
- P3374 【模板】树状数组 1
- SQL 查询语句总是先执行 SELECT?你们都错了
- sql注入攻击与防御第二版读书笔记二——SQL盲注利用
- go的错误处理(异常捕获、处理):defer+recover机制处理错误、自定义异常(自定义错误)
- 仿QQ联系人的TableView的折叠与拉伸
- leetcode题解72-编辑距离
- 正则表达式--内功心法
- dubbo学习笔记一(服务注册)
- HYSPLIT 模型 传输轨迹 使用指南
- MongoDB概念集合
- Linux交换分区 swap分区
- 神来之笔,2021CTF内核漏洞精选解析
- 《沙丘》全球票房突破3.5亿美元,这部科幻巨制到底有多厉害?
- 我一个文科生想转行IT,为什么大部分人向我推荐软件测试
- 输出全靠画html5在线玩4399,输出全靠画
- 大数据中台架构以及建设全流程一(Paas层设计)
- Unity 日志输出
- 让对方计算机死机的代码,微信让对方死机代码是什么?一串代码卡死微信
- c语言求椭圆的切线方程,如何快速求椭圆的切线方程
热门文章
- mysql mgr监控_6. MySQL组复制(MGR)全解析 Part 6 监控MySQL组复制
- python一行输出_#python版一行内容分行输出
- iPhone清理喇叭灰尘_手机喇叭用久了灰尘多,与其经常换手机,不如自己动手清理...
- java quartz 触发_JavaEE进阶知识学习-----定时任务调度Quartz-2-触发器Trigger
- 查看谁连接oracle,oracle如何查看当前有哪些用户连接到数据库
- 本地计算机上的mysql57_win10出现本地计算机上的MySQL57服务启动后停止
- JQuery 添加元素appendf 后\prepend前,before 前\after 后,删除元素remove\empty
- CPT自定义按钮导出(含参)
- FR cpt报表的自动滚屏/滚动编辑
- c语言下建立直角坐标系,大地坐标系和地心地固直角坐标ECEF转换公式和C语言函数代码...