范围

为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口

通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限

在常规操作不能有效地修改文档时,使用范围往往可以达到目的

DOM中的范围

DOM2级在Document类型中定义了 createRange()方法

在兼容该接口的浏览器中,该方法属于document对象

可以使用以下代码,检测浏览器对其的兼容

var supportsRange = document.implementation.hasFeature("Range","2.0");
var alsoSupportsRange = (typeof document.createRange ==="function");

如果浏览器支持范围,那么就可以使用createRange()来创建范围

var range = document.createRange();

与节点类似,创建的范围也会和文档关联,不能用于其它文档

每个范围由一个Range类型的实例表示

下列属性提供了范围在文档中的位置信息

  • startContainer:包含范围起点的节点(即选区中第一个节点的父节点)
  • startOffset:范围起点在startContainer 中的偏移量
  • endContainer:包含范围终点的节点(即选区中最后一个节点的父节点)
  • endOffset:范围终点在endContainer中的偏移量
  • commonAncestorContainer:距离起点和终点最近的公共祖先节点

用DOM范围实现简单选择

使用范围来选择文档中的一部分,最简单的方式就是通过

selectNode() 和 selectNodeContents()方法

这两个方法都接收一个参数,即一个DOM节点

selectNode 是将传入节点的整个节点作为范围

selectNodeContents则是将传入节点的所有子节点作为范围

例如:

<p id = "p1"><b>hello</b>world!</p>

对于以上HTML代码

使用以下代码创建范围

var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1'); range1 = range1.selectNode(p1);
range2 = range2.selectNodeContents(p1);

对于上述代码

range1包含的文档内容如下:

<p id = "p1"><b>hello</b>world!</p>

range2包含的文档内容如下:

<b>hello</b>world!

此外,为了更加精细地控制将哪些节点包含在范围中,还可以使用以下方法

  • setStartBefore(refNode):将范围起点设置在 refNode 之前(也就是refNode作为范围的第一个子节点)
  • setStartAfter(refNode):将范围起点设置在 refNode 之后(即refNode的下一个同辈节点作为范围的第一个子节点)
  • setEndBefore(refNode):将范围终点设置在 refNode 之前
  • setEndAfter(refNode):将范围终点设置在 refNode 之后

使用这里提到的方法会自动设置范围属性,当然也可以通过设置范围属性来改变选区的范围

即startContainer、startOffset、endContainer、endOffset、commonAncestorContainer这些选区属性

用DOM范围实现复杂选择

当我们需要更加复杂的选区,比如我们需要选择某个节点的一部分时

要创建这样复杂的节点,则需要使用 setStart()和 setEnd()来分别设置范围的起止位置

这两个方法都接收两个参数:

1.DOM节点

2.开始/结束位置在节点中的偏移量

同样下方的HTML代码为例

<p id = "p1"><b>hello</b>world!</p>

这里我们使用setStart()和 setEnd()来实现之前的range1、range2

即如下方代码所示:

var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1');
var Index = -1;//用于表示p1在其父节点中的偏移 for(let i = 0,len = p1.parentNode.childNodes.length;i<len;i++){
if(p1.parentNode.childNodes[i] === p1){
Index = i;
break;
}
} range1.setStart(p1.parentNode, Index);
range1.setEnd(p1.parentNode, Index+1);
range2.setStart(p1, 0);
range2.setEnd(p1, p1.childNodes.length);

Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择的更多相关文章

  1. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  2. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  3. Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历

    遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...

  4. Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小

    在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...

  5. Javascript高级编程学习笔记(50)—— DOM2和DOM3(2)样式

    样式 在HTML中定义元素的方式有以下三种: 1.link标签引入外部样式表 2.style标签定义嵌入样式 3.通过JS中对style特性定义元素样式(行内样式) “DOM2级样式”围绕上述样式机制 ...

  6. Javascript高级编程学习笔记(56)—— DOM2和DOM3(8)低版本IE范围

    虽然IE9支持了DOM范围,但是IE8及更早版本并不支持DOM范围 所以IE8以下的更早版本的IE提出了与之类似的概念以供大家使用 也就是 文本范围 var range = document.body ...

  7. Javascript高级编程学习笔记(55)—— DOM2和DOM3(7)操作范围

    操作范围中的内容 在创建范围时,内部会为这个范围创建一个文档片段 范围所属的全部节点都会被添加到这个片段中 虽然选取范围可以不是完整的.良好的DOM结构 但是在这个为范围创建的文档片段中,会自己完缺少 ...

  8. Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

  9. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

随机推荐

  1. jmeter在几个固定的字符串中,随机取其中之一的方法

    在测试过程中遇到上送字段必需是几个固定值中的一个, 使用读取文件中几个固定值,然后随机在这几个固定值中选择的办法解决问题 __CSVRead() CSV file to get values from ...

  2. Python第十七天 抽象类

    from abc import ABCMeta, abstractmethod class A(metaclass=ABCMeta): 称 A 为抽象类 @abstractmethod def tes ...

  3. eclipse创建scrapy项目

    1. 您必须创建一个新的Scrapy项目. 进入您打算存储代码的目录中(比如否F:/demo),运行下列命令: scrapy startproject tutorial 2.在eclipse中创建一个 ...

  4. GUI学习之七——单选框QRadioButton和QButtonGroup的学习总结

    一.单选框QRadioButton的使用 1.类的描述 a.单选框按钮用于给用户提供若干选项中的单选操作,当一个被选中时,会自动取消选中的那个.(如果只有一个时可以通过单击该按钮改变其状态:而存在多个 ...

  5. 图解Go的channel底层原理

    废话不多说,直奔主题. channel的整体结构图 简单说明: buf是有缓冲的channel所特有的结构,用来存储缓存数据.是个循环链表 sendx和recvx用于记录buf这个循环链表中的发送或者 ...

  6. cookie设置和清除,解决跨目录读取不到cookie值

    cookies.setCookie("UserType", result.UserType, null, '/'); cookies.deleteCookie("User ...

  7. UE4的委托

    UE中委托的使用很广泛,许多Event的触发都有对应的虚函数和委托,虚函数不用讲,只能在派生类中使用,而委托可以在别的类或者蓝图中使用,就应用范围而言,委托的使用更灵活.以AActor的 /** * ...

  8. Linux学习笔记:安装python

    一般linux自带python2,如果需要python3以上版本,可以不需要卸载自带的python2,二者可以共存.只需要配置相应的环境变量即可. 具体回答可以参考这篇文章 https://stack ...

  9. mac电脑Git提交代码到Github提示git-credential-osxkeychain 验证解决方案

    ## 啊哈哈 这个简单,直接给出当前mac电脑登录账号密码即可,^_*,拿走不谢!!

  10. HttpServerUtility常用方法

    //HttpServerUtility是一个工具类,为了在后台处理请求方便获取到一些常用的类型,Asp.net将很多常用的东西封装到这里. // 获取服务器的计算机名称. public string ...