为什么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的学习笔记相关推荐

  1. 图像处理(二十四)Gradient Domain High Dynamic Range Compression学习笔记

    <Gradient Domain High Dynamic Range Compression>学习笔记 原文地址: 作者:hjimce 一.相关理论 本篇博文主要讲解基于梯度域编辑的HD ...

  2. Python学习笔记——for循环和range函数

    Python学习笔记--for循环和range函数 Python的for循环 for 目标 in 表达式 :循环体 案例一 >>> example = 'abcdef' >&g ...

  3. Python 学习笔记 列表 range() xxx XXX

    Python 学习笔记 列表 range() xxx XXX print("-" * 30) for value in range(1, 5):print(value)number ...

  4. PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 call

    您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...

  5. 知识图谱学习笔记(1)

    知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...

  6. Numpy学习笔记(下篇)

    目录 Numpy学习笔记(下篇) 一.Numpy数组的合并与分割操作 1.合并操作 2.分割操作 二.Numpy中的矩阵运算 1.Universal Function 2.矩阵运算 3.向量和矩阵运算 ...

  7. 笔记 | 吴恩达Coursera Deep Learning学习笔记

    向AI转型的程序员都关注了这个号☝☝☝ 作者:Lisa Song 微软总部云智能高级数据科学家,现居西雅图.具有多年机器学习和深度学习的应用经验,熟悉各种业务场景下机器学习和人工智能产品的需求分析.架 ...

  8. 一文弄懂元学习 (Meta Learing)(附代码实战)《繁凡的深度学习笔记》第 15 章 元学习详解 (上)万字中文综述

    <繁凡的深度学习笔记>第 15 章 元学习详解 (上)万字中文综述(DL笔记整理系列) 3043331995@qq.com https://fanfansann.blog.csdn.net ...

  9. python可视化:matplotlib学习笔记

    信息可视化是数据分析的一块重要内容.这是一个探索性的过程.比如说,可以帮助我们坚定离群值,或者必要的数据转换,又或者是构建一个理想的模型.对于其他的一些领域,也可以进行web可视化.Python有许多 ...

  10. Python基础语法学习笔记

    Python基础语法学习笔记 想淘宝省钱看我简介,博客www.liangxin.name (一) 一.Print()函数 1.数字可以直接输出,无需加引号 只能理解数字,却读不懂文字.因为数字和数学运 ...

最新文章

  1. 干货丨一文看懂人工智能、机器学习和深度学习的区别与联系
  2. P3374 【模板】树状数组 1
  3. SQL 查询语句总是先执行 SELECT?你们都错了
  4. sql注入攻击与防御第二版读书笔记二——SQL盲注利用
  5. go的错误处理(异常捕获、处理):defer+recover机制处理错误、自定义异常(自定义错误)
  6. 仿QQ联系人的TableView的折叠与拉伸
  7. leetcode题解72-编辑距离
  8. 正则表达式--内功心法
  9. dubbo学习笔记一(服务注册)
  10. HYSPLIT 模型 传输轨迹 使用指南
  11. MongoDB概念集合
  12. Linux交换分区 swap分区
  13. 神来之笔,2021CTF内核漏洞精选解析
  14. 《沙丘》全球票房突破3.5亿美元,这部科幻巨制到底有多厉害?
  15. 我一个文科生想转行IT,为什么大部分人向我推荐软件测试
  16. 输出全靠画html5在线玩4399,输出全靠画
  17. 大数据中台架构以及建设全流程一(Paas层设计)
  18. Unity 日志输出
  19. 让对方计算机死机的代码,微信让对方死机代码是什么?一串代码卡死微信
  20. c语言求椭圆的切线方程,如何快速求椭圆的切线方程

热门文章

  1. mysql mgr监控_6. MySQL组复制(MGR)全解析 Part 6 监控MySQL组复制
  2. python一行输出_#python版一行内容分行输出
  3. iPhone清理喇叭灰尘_手机喇叭用久了灰尘多,与其经常换手机,不如自己动手清理...
  4. java quartz 触发_JavaEE进阶知识学习-----定时任务调度Quartz-2-触发器Trigger
  5. 查看谁连接oracle,oracle如何查看当前有哪些用户连接到数据库
  6. 本地计算机上的mysql57_win10出现本地计算机上的MySQL57服务启动后停止
  7. JQuery 添加元素appendf 后\prepend前,before 前\after 后,删除元素remove\empty
  8. CPT自定义按钮导出(含参)
  9. FR cpt报表的自动滚屏/滚动编辑
  10. c语言下建立直角坐标系,大地坐标系和地心地固直角坐标ECEF转换公式和C语言函数代码...