JavaScript DOM2和DOM3——“范围”的注意要点

最新推荐文章于 2024-06-06 21:46:15 发布
最新推荐文章于 2024-06-06 21:46:15 发布
阅读量147 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000004270980
版权

“DOM2级遍历和范围”模块定义了“范围”接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。

DOM中的范围

DOM2级在Document类型中定义了createRange()方法，可以用来创建DOM范围，如下所示：

var range = document.createRange();

每个范围由一个Range类型的实例表示，这个实例有很多属性和方法：

  • startContainer：包含范围起点的节点（选区中第一个节点的父节点）；

  • startOffset：范围在startContainer中起点的偏移量；

  • endContainer：包含范围终点的节点（选区中最后一个节点的父节点）；

  • endOffset：范围在endContainer中终点的偏移量；

  • commonAncestorContainer：startContainer和endContainer共同的祖先节点在文档树中位置最深的那个；

用DOM范围实现简单选择

selectNode()或selectNodeContents()

前者选择整个节点，包括子节点；后者选择节点的子节点。如：

<body>
    <p id="p1"><b>Hello</b> world!</p>
    <script>
    var range1 = document.createRange(),
        range2 = document.createRange(),
        p1 = document.getElementById("p1");
    range1.selectNode(p1);
    range2.selectNodeContents(p1);
    
    console.log(range1.startContainer); //document.body
    console.log(range1.startOffset); //1 有个空格
    console.log(range1.endContainer); //document.body
    console.log(range1.endOffset); //2
    console.log(range1.commonAncestorContainer); //document.body
    
    console.log(range2.startContainer); //p1
    console.log(range2.startOffset); //0
    console.log(range2.endContainer); //p1
    console.log(range2.endOffset); //2
    console.log(range2.commonAncestorContainer); //p1
    </script>
</body>

在调用selectNode()时，startContainer、endContainer和commonAncestorContainer等都等于传入节点的父节点，也就是其中的document.body。而startOffset属性等于给定节点在其父节点的childNodes集合中的索引。endOffset等于startOffset加上1；

在调用selectNodeContents()时，startContainer、endContainer和commonAncestorContainer等于传入的节点。而startOffset属性始终等于0.最后，endOffset等于子节点的数量（node.childNodes.length）；

更精细的选择

为了更精细的控制将哪些节点包含在范围中，还可以使用下列方法：

  • setStartBefore（refNode）：将范围的起点设置在refNode之前；

  • setStartAfter（refNode）：将范围的起点设置在refNode之后；

  • setEndBefore（refNode）：将范围的终点设置在refNode之前；

  • setEndAfter（refNode）：将范围的终点设置在refNode之后；

如下html：

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

js：

var range1 = document.createRange(),
    range2 = document.createRange(),
    p1 = document.getElementById("p1");
range1.selectNode(p1);
range1.setStartAfter(p1);

console.log(range1.startContainer); //document.body
console.log(range1.startOffset); //2 有1个空格和一个p元素
console.log(range1.endContainer); //document.body
console.log(range1.endOffset); //2 选择了一个元素，所以是startOffset加1
console.log(range1.commonAncestorContainer); //document.body

range2.setStartAfter(p1); //结果与上面的相同
console.log(range2.startContainer); //document.body
console.log(range2.startOffset); //2
console.log(range2.endContainer); //document.body
console.log(range2.endOffset); //2
console.log(range2.commonAncestorContainer); //document.body

用DOM范围实现更加复杂的选择

setStart()和setEnd()方法

这两个方法都接受两个参数：一个参照节点和一个偏移量值。对前者来说，参照节点会变成startContainer，偏移值则会变成startOffset。对于后者来说，参照节点会变成endContainer，偏移值会变成endOffset。

html：

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

js：

var p1 = document.getElementById("p1"),
    helloNode = p1.firstChild.firstChild,
    worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

这样就完成了对“llo wo”的选择，但仅仅完成对该选区的选择意义不大，重要的是对其进行操作。

操作DOM范围中的内容

deleteContents()删除范围所包含的内容

如：

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

举例：

var p1 = document.getElementById("p1");
var hello = p1.firstChild.firstChild;
var world = p1.lastChild;
var range = document.createRange();

range.setStart(hello, 1);
range.setEnd(world, 2);

console.log(range.toString()); //ello w
console.log(p1.outerHTML); //<p id="p1"><b>Hello</b> world!</p>

range.deleteContents(); //刪除範圍內的內容
console.log(p1.outerHTML); //<p id="p1"><b>H</b>orld!</p>

又如：

<ul id="list">
    <li>thi is a list No.1</li>
    <li>thi is a list No.2</li>
    <li>thi is a list No.3</li>
    <li>thi is a list No.4</li>
    <li>thi is a list No.5</li>
</ul>

举例：

var list = document.getElementById("list");
var starting = list.getElementsByTagName("li")[1];
var ending = list.getElementsByTagName("li")[3];
var range = document.createRange();
range.setStart(starting, 0);
range.setEnd(ending, 0);
console.log(range.toString());
console.log(list.outerHTML);
range.deleteContents();
console.log(list.outerHTML);

extractContents()移除范围所包含的内容并返回文档片段

如：

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

举例：

var p1 = document.querySelector("#p1");
var helloNode = p1.firstChild.firstChild,
    worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
var fragment = range.extractContents();
p1.parentNode.insertBefore(fragment, p1);

又如：

<ul id="list">
    <li>thi is a list No.1</li>
    <li>thi is a list No.2</li>
    <li>thi is a list No.3</li>
    <li>thi is a list No.4</li>
    <li>thi is a list No.5</li>
</ul>

举例：

var list = document.getElementById("list");
var range = document.createRange();

var starting = list.getElementsByTagName("li")[1];
var ending = list.getElementsByTagName("li")[4];

range.selectNode(list);
range.setStartBefore(starting);
range.setEndBefore(ending);

var fragment = range.extractContents();
document.body.appendChild(fragment);

console.log(document.body.innerHTML);

// <li>thi is a list No.2</li>
// <li>thi is a list No.3</li>
// <li>thi is a list No.4</li>

console.log(list.innerHTML);

// <li>thi is a list No.1</li>
// <li>thi is a list No.5</li>

cloneContents()创建范围对象的一个副本

如：

var list = document.getElementById("list");
var range = document.createRange();

var starting = list.getElementsByTagName("li")[1];
var ending = list.getElementsByTagName("li")[4];

range.selectNode(list);
range.setStartBefore(starting);
range.setEndBefore(ending);

var fragment = range.cloneContents();
document.body.appendChild(fragment);

console.log(document.body.innerHTML);

// <li>thi is a list No.2</li>
// <li>thi is a list No.3</li>
// <li>thi is a list No.4</li>

console.log(list.innerHTML);

// <li>thi is a list No.1</li>
// <li>thi is a list No.2</li>
// <li>thi is a list No.3</li>
// <li>thi is a list No.4</li>
// <li>thi is a list No.5</li>

插入DOM范围中的内容

insertNode()向范围选区的开始处插入一个节点(范围内部插入内容)

如：


<ul id="list">
    <li>thi is a list No.1</li>
    <li>thi is a list No.2</li>
    <li>thi is a list No.3</li>
    <li>thi is a list No.4</li>
    <li>thi is a list No.5</li>
</ul>

代码：

<script>
var list = document.getElementById("list");
var range = document.createRange();

var starting = list.getElementsByTagName("li")[1];
var ending = list.getElementsByTagName("li")[4];

range.selectNode(list);
range.setStartBefore(starting);
range.setEndBefore(ending);

var newLi = document.createElement("li");
newLi.appendChild(document.createTextNode("data"));
range.insertNode(newLi);

console.log(list.innerHTML);
// <li>thi is a list No.1</li>
// <li>data</li><li>thi is a list No.2</li>
// <li>thi is a list No.3</li>
// <li>thi is a list No.4</li>
// <li>thi is a list No.5</li>
</script>

又如：

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

代码：

var p = document.getElementById("p1");
var range = document.createRange();
var starting = p.firstChild.firstChild;
var ending = p.lastChild;

range.setStart(starting, 5);
range.setEnd(ending, 0);

var span = document.createElement("span");
span.appendChild(document.createTextNode(" there in this"));

range.insertNode(span);

console.log(p1.innerText); //Hello there in this world!
console.log(p1.innerHTML); //<b>Hello<span> there in this</span></b> world!

surroundContents()向范围选区周围插入一个节点(围绕范围插入内容)

通常与selectNode()配合，因为范围必须包含整个DOM选区，不能仅仅包含选中的DOM节点。

如：

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

代码：

var p = document.getElementById("p1");
var range = document.createRange();

range.selectNode(p.firstChild);

var span = document.createElement("span");
span.style.border = "1px solid orange";
span.style.borderRadius = "3px";

range.surroundContents(span);

console.log(p1.innerHTML); //<span style="border: 1px solid orange; border-radius: 3px;"><b>Hello</b></span> world!

为了插入span标签，范围必须包含整个DOM选区，所以推荐使用selectNode()配合。

折叠DOM范围

collapse()方法

折叠就是指范围中未选择文档的任何部分。该函数接收一个参数，一个布尔值。true表示折叠到范围的起点，参数false表示折叠到范围的终点。要确定范围已经折叠完毕，可以检查collapsed属性：

如：

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

代码：

var p = document.getElementById("p1");
var range = document.createRange();

range.selectNode(p);
range.collapse(true);
console.log(range.collapsed); //True

又如：

<ul id="list">
    <li>thi is a list No.1</li>
    <li>thi is a list No.2</li>
    <li>thi is a list No.3</li>
    <li>thi is a list No.4</li><li>thi is a list No.5</li>
</ul>

代码：

var list = document.querySelector("#list");
var range = document.createRange();
range.setStartAfter(list.getElementsByTagName("li")[1]);
range.setEndBefore(list.getElementsByTagName("li")[2]);
console.log(range.collapsed); //False 因为还有一个空白节点在这里

var range2 = document.createRange();
range2.setStartAfter(list.getElementsByTagName("li")[3]);
range2.setEndBefore(list.getElementsByTagName("li")[4]);
console.log(range2.collapsed); //True 因为范围没有选中任何部分

比较DOM范围

comopareBoundaryPoints()方法来比较

该方法涌来比较这些范围是否有公共的边界。接收两个参数：表示比较方式的常量值和要比较的范围。如：

  • Range.START_TO_START - 比较两个 Range 节点的开始点

  • Range.END_TO_END - 比较两个 Range 节点的结束点

  • Range.START_TO_END - 用 sourceRange 的开始点与当前范围的结束点比较

  • Range.END_TO_START - 用 sourceRange 的结束点与当前范围的开始点比较

注意：《高级程序设计》一书中，对后两个的说明太模糊（不正确？）；下面是w3school的解释：

您可能认为，首先需要用参数 how 的范围常量指定当前范围的边界点，然后再用它指定 sourceRange 的边界点。但事实上，

  1. 常量 Range.START_TO_END 指定与当前范围的 end 点和 sourceRange 的 start 点进行比较。

  2. 常量 Range.END_TO_START 指定比较当前范围的 start 点和指定范围的 end 点。

如果第一个范围中的点位于第二个范围中的点之前，返回-1；如果相等返回0；如果第一个范围中的点位于第二个范围中的点之后，返回1

如：

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

代码：

var p = document.getElementById("p1");
var range1 = document.createRange();
var range2 = document.createRange();

range1.selectNodeContents(p);
range2.selectNodeContents(p);
range2.setEndBefore(p.lastChild);

console.log(range1.toString()); //Hello world!
console.log(range2.toString()); //Hello

console.log(range1.compareBoundaryPoints(Range.START_TO_START, range2)); //0
console.log(range1.compareBoundaryPoints(Range.END_TO_END, range2)); //1

又如：

<ul id="list">
    <li>thi is a list No.1</li>
    <li>thi is a list No.2</li>
    <li>thi is a list No.3</li>
    <li>thi is a list No.4</li><li>thi is a list No.5</li>
</ul>

代码：

var list = document.querySelector("#list");
var range1 = document.createRange();
var range2 = document.createRange();

range1.selectNodeContents(list);
range1.setStartAfter(list.firstChild.nextSibling);
range1.setEndBefore(list.lastChild.previousSibling);

range2.selectNodeContents(list);

console.log(range1.compareBoundaryPoints(Range.START_TO_START, range2)); //1
console.log(range1.compareBoundaryPoints(Range.END_TO_END, range2)); //-1
console.log(range1.compareBoundaryPoints(Range.START_TO_END, range2)); //1 注意这里是range1的END与range2的start对比；
console.log(range1.compareBoundaryPoints(Range.END_TO_START, range2)); //-1 注意这里是range1的START与range2的END对比；

复制DOM范围

cloneRange()方法复制范围；

var newRange = range.cloneRange();

清理DOM范围

detach()方法清理范围；

range.detach();
range = null;

上面的是从文档中分离范围；下面的是解除引用。

下节再讨论IE8及更早版本中的范围

weixin_34150503
关注
(转)JavaScript 事件——“模拟事件”的注意要点
Joker's blog
06-11 434
JavaScript 事件——“模拟事件”的注意要点 javascript DOM中的事件模拟 三个步骤： 首先通过document.createEvent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串： UIEvents（DOM3中的UIEvent）鼠标和键盘事件； MouseEvents（DOM3中的MouseEvent）鼠标事件； M...
JavaScript 动态网页实例 —— 广告效果
最新发布
cccloveforever的博客
07-02 1008
广告是现代网页设计中不可或缺的内容。广告可以有很多种形式，但最终目的都是要吸引观众的注意力。尽管广告少不了画面、音效和广告语等效果，但其实现主要还是应用JavaScript 代码，只要很好掌握了JavaScript程序设计，剩下的就是创意和美工了。本章介绍几种广告效果，包括对联广告、飘动广告、滚动广告和特殊视觉效果的广告，相信读者会从中受到启发。
DOM中的范围
Blog
08-21 315
DOM2级在doucment类型中定义了createRange()方法。在兼容DOM的浏览器中属于document对象。 1.创建DOM范围   var range=document.createRange(); 2.用范围来实现简单选择     selectNode(): 选择整个节点，包括子节点     range.selectNode(节点名称);    selectNodeCo
javascript DOM详解之DOM2与DOM3
热门推荐
seacean2000的专栏
12-13 1万+
DOM2与DOM3主要是在DOM1的基础上引入更多的交互能力，支持了更高级的XML特性。 DOM2做的主要的扩展子集具体为： DOM Level 2 Core:在一级核心的基础上，为节点添加了更多的方法和属性。 DOM Level 2 Views:为文档定义了基于样式信息的不同视图 DOM Level 2 Events:说明了如何使用事件与DOM进行交互。 DOM Level 2 Sty
说说 JavaScript 在 DOM2 级标准中定义的范围规则
读万卷书，行万里路
06-01 674
DOM2 级标准中定义的范围，可以选择文档中的一个区域进行处理，解决在某些情况下，常规的 DOM 操作中无法有效修改 DOM 文档的问题。Firefox、Opera、Safari 和 Chrome 都支持 DOM 范围。IE 以专有的方式实现了自己的范围。1. DOM 中的范围可以这样检测浏览器是否支持范围：var supportsRange = document.implementation.ha
Javascript高级编程学习笔记（54）—— DOM2和DOM3（6）范围选择
dazhongshuo1167的博客
02-05 122
范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域，而不必考虑元素的界限 在常规操作不能有效地修改文档时，使用范围往往可以达到目的 DOM中的范围 DOM2级在Document类型中定义了 createRange（）方法 在兼容该接口的浏览器中，该方法属于document对象 可以使用以下代...
js学习笔记：DOM2和DOM3(放弃……)
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
10-24 2557
DOM1级主要定义的还是HTML的地层结构，DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力。为此，DOM2和DOM3级分为许多模块，分别描述了DOM的某个非常具体的子集。 DOM2核心：为节点添加了更多方法和属性 DOM2视图：为文档定义了基于样式信息的不同视图 DOM2事件：说明了如何使用事件与DOM文档交互 DOM2样式：定义了如何以编程方式来访问和改变CSS样式信息 DOM2遍历
12.DOM2 和DOM3（3）
official business
06-01 177
遍历：“DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM 结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM 结构执行深度优先（depth-first）的遍历操作。在与DOM 兼容的浏览器中（Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome0.2 及更高版本），都可以访问到这些类型的对象。IE 不支持DOM 遍历。使用下列代码可以检测浏览器对DOM2 级遍历能力的支持情况。 var
JavaScript——DOM3
m0_56712012的博客
01-20 145
文章目录一、高级事件1.注册事件2.事件监听3. 删除事件（解绑事件）4.DOM事件流5.事件对象6.阻止默认行为7. 阻止事件冒泡8.事件委托二、.常用鼠标事件1.鼠标事件对象2.获取鼠标在页面的坐标三、 常用的键盘事件1.键盘事件2. 键盘事件对象 一、高级事件 1.注册事件 2.事件监听 addEventListener()事件监听（IE9以后支持） eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件
JavaScript 动态网页实例 —— DOM中的节点操作
cccloveforever的博客
05-23 1444
DOM是 Document Object Model的缩写，由W3C进行标准化。文档对象模型(DOM)是一个基础性概念，主要涉及网页页面元素的层次关系。很好地理解文档对象模型(DOM)的概念，对于编写出高效、实用的JavaScript程序是非常有帮助的。DOM将HTML文档理解为一棵完整的代码树，每个HTML标签就是该树上的一个节点。本章介绍DOM中的节点操作，主要包括:节点插入与追加、节点复制、节点删除与替换、修改节点内容等知识。
JavaScript 动态网页实例 —— 框架操作
cccloveforever的博客
06-06 1350
框架是一种可以操作的特殊窗口，当一个浏览器窗口包含多个框架的时候，可以使用window.fames[]对每个隔开的窗口对象进行访问。window.fames[]是一个数组，包含了窗口中的每个框架。本文主要介绍框架的访问、嵌套框架(内联框架)、框架间的交叉通信、嵌套框架间的交叉通信等内容。
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
08-10
3. **jQuery**: JavaScript的一个库，简化了DOM操作，使JavaScript代码更加简洁高效。 4. **Bootstrap**: 一个流行的前端框架，提供了一系列的CSS和JS组件，可以帮助快速搭建美观且功能丰富的响应式网页。 #### 四...
DOM 中的范围
weixin_33834679的博客
01-29 237
为了让开发人员更方便控制页面，DOM2 级遍历和范围模块定义了 范围 （range） 接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。 Firefox、Opera、Safari 和 Chrome 都支持 DOM 范围。IE 以专有方式实现了自己的范围特性。 DOM 中的范围 DOM2 级在 Document 类型中定义了 createRange()...
DOM2范围
weixin_34389926的博客
06-19 111
DOM2范围 除了IE低版本（ie8-)，其余主流浏览器都支持DOM2的范围，然而IE用其特有的方式实现了范围特性！ Document类型中定义了createRange()，这个方法属于document对象，首先检测浏览器是否支持他： var supportRange=document.implementation.hasFe...
JS学习11（DOM2&DOM3）
exialym的博客
05-13 8462
DOM1级主要是在定义HTML和XML文档的低层结构。D2和D3则在这个结构的基础上引入了更多的交互能力。它们被分为了许多模块： DOM Level 2 Core：为1级核心添加了更多方法和属性 DOM Level 2 Views：为文档定义了基于样式信息的不同视图 DOM Level 2 Events：说明了如何使用事件与DOM文档交互 DOM Level 2 Style：有关CSS DOM
前端重新学习（5）DOM与DOM2、DOM3区别以及DOM2新特性
qq_16546829的博客
08-30 4972
------------摘抄自他人笔记(http://itbilu.com/javascript/js/Vyxodm_1g.html、https://blog.csdn.net/pxy_lele/article/details/49755071) 感谢分享---------------------- 目录 DOM0、DOM1、DOM2、DOM3的区别 DOM0 DOM0与DHTML ...
js小结
shangye的专栏
04-08 757
Window对象  表示整个浏览器窗口，不必表示其中包含的内容。还可用于移动或调整它表示的浏览器的大小。如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中。可以用window.frames[0]或window.frames[“topFrame”]引用框架，也可以用top对象代替window对象。Window对象可省略。（曾经做了个页面，
天坑之路：用js给选中文字添加样式
我的乌托
12-28 1579
前言 本例基于react，但是实际上就是用原生js做的。兼容性做到了IE9，但是按照这个思路做是可以做到IE8甚至更低的。 需求与最初的思路 当我拿到这个需求的时候以为很简单，就是可以给页面上的文章做记号，比如添加个下划线，或者背景涂色做成荧光笔的样子。 因为只需要兼容IE9，所以window.getSelection是支持的。（IE8及以下有其它的获取选中的方法） 那么思路就是选中文本，点击添加...
JS高级程序设计——第12章 DOM2和DOM3 12.4 范围
YuTong_的博客
03-30 522
第12章 DOM2和DOM3 12.4 范围一、DOM中的范围1、 使用createRange()方法创建DOM范围2、用 DOM 范围实现简单选择 一、DOM中的范围 为了让开发人员更方便地控制页面，“DOM2 级遍历和范围”模块定义了“范围”(range)接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限(选择在后台完成，对用户是不可见的)。 在常规的 DOM 操作不能更有效地修改...
掌握JavaScript DOM 用户选取范围与操作
总结来说，JavaScript DOM的范围对象是实现网页动态操作的关键工具，理解它的概念、创建和使用方法对于开发高效、用户友好的Web应用至关重要。通过本章的学习，开发者能够更好地掌握如何在HTML文档中定位和处理用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值