首页 / JAVASCRIPT / Javascript标准DOMRange操作全集_基础知识

Javascript标准DOMRange操作全集_基础知识

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript标准DOMRange操作全集_基础知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12100字，纯文字阅读大概需要18分钟。

内容图文

2级DOM定义了一个createRange()方法，如果是按照DOM此标准的浏览器（IE并不是支持此标准的，但是IE里的属性或方法却远比标准中定义的多得多），它属于document对象，所以创建一个range对象要这样做：

var oRange = document.createRange();

如果你要检测你的浏览器是否支持此标准Range对象，可以用hasFeature()方法来检测：

var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");
if (supportsDOMRange) {
var oRange = document.createRange();
//range code here
}
Range对象进行简单的选择
最简单用Range进行选择，用selectNode()或者selectNodeContents()方法，这两个方法只有一个接收参数，一个DOM节点。

selectNode()方法选择全部节点，包括它的孩子，而selectNodeContents()选择的节点只是它的孩子。如

oRange1和oRange2包含上面所说的两种方法，但是看了下面的示图相信你能很快明白这两个方法的区别：

Javascript标准DOMRange操作全集_基础知识 - 文章图片

当你创建了一个Range对象时，Range实例就会有以下的属性：
startContainer — 返回range对象从何开始的节点对象（父节点的第一个节点）
startOffset — 返回Range开始的偏移量(offset)，如果startContainer是一个文本节点，注释节点，或者是CDATA节点，这个属性返回文本的偏移量，否则返回第一个节点的索引。
endCOntainer — 返回Range对象最后一个节点对象（父节点的最后一个节点）
endOffset — 返回Range结束时的偏移量(offset)特性与startOffset相同。
commonAncestorContainer — 返回第一个包含该Range对象的节点。

注：这些属性均为只读属性(read-only)，startOffset和endOffset将在下文中有较详细的解释。

下面这段代码将说明这些属性，请在Mozilla firefox里运行（支持此标准的浏览器——DOM2级，IE里将无效）：

<html>
<head>
<title>DOM Range Example</title>
<script type="text/javascript">
function useRanges() {
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);

document.getElementById("txtStartContainer1").value
= oRange1.startContainer.tagName;
document.getElementById("txtStartOffset1").value =
oRange1.startOffset;
document.getElementById("txtEndContainer1").value =
oRange1.endContainer.tagName;
document.getElementById("txtEndOffset1").value =
oRange1.endOffset;
document.getElementById("txtCommonAncestor1").value =
oRange1.commonAncestorContainer.tagName;
document.getElementById("txtStartContainer2").value =
oRange2.startContainer.tagName;
document.getElementById("txtStartOffset2").value =
oRange2.startOffset;
document.getElementById("txtEndContainer2").value =
oRange2.endContainer.tagName;
document.getElementById("txtEndOffset2").value =
oRange2.endOffset;
document.getElementById("txtCommonAncestor2").value =
oRange2.commonAncestorContainer.tagName;
}
</script>
</head>
<body><p id="p1"><b>Hello</b> World</p>
<input type="button" value="Use Ranges" onclick="useRanges()" />
<table border="0">
<tr>
<td>
<fieldset>
<legend>oRange1</legend>
Start Container:
<input type="text" id="txtStartContainer1" /><br />
Start Offset:
<input type="text" id="txtStartOffset1" /><br />
End Container:
<input type="text" id="txtEndContainer1" /><br />
End Offset:
<input type="text" id="txtEndOffset1" /><br />
Common Ancestor:
<input type="text" id="txtCommonAncestor1" /><br />
</fieldset>
</td>
<td>
<fieldset>
<legend>oRange2</legend>
Start Container:
<input type="text" id="txtStartContainer2" /><br />
Start Offset:
<input type="text" id="txtStartOffset2" /><br />
End Container:
<input type="text" id="txtEndContainer2" /><br />
End Offset:
<input type="text" id="txtEndOffset2" /><br />
Common Ancestor:
<input type="text" id="txtCommonAncestor2" /><br />
</fieldset>
</td>
</tr>
</table>
</body>
</html>

上面的代码将不作注释了，有什么问题，在评论中留言。

Range中还有一些其它的方法：
setStartBefore(node) — 设置Range的相对于node节点的起始位置
setStartAfter(node) — 同上
setEndBefore — 设置Range的相对于node节点的结束位置
setEndAfter — 同上

复杂的DOM Range

建立复杂的DOM range需要使用setStart()和setEnd()两个方法，这两个方法有两个参数：一个是一个节点(node)引用和一个偏移(offset)。
setStart方法节点的引用是startContainer，偏移则是startOffset；
setEnd()方法时，节点引用为endContainer，偏移就是endOffset。

使用这两个方法与selectNode()和selectNodeContents()方法相似。比如，下面的useRanges()函数的前一个示例，可以使用setStart()和setEnd():

注意这个选择节点时的代码(oRange1)，你必须指定oP1父节点里所有childNodes集合里的一个索引。

而选择内容时的代码(oRange2)，则不需要额外的考虑，

从刚才的例子来从这段HTML里(code <p id="p1"><b>Hello</b> World</p>)
选择从hello中的llo开始到从World中的Wo开始的Range，我们用setStart()和setEnd()，很容易就可以做到。

首先，我们必须用常规的DOM方法得到文本节点的引用还有就是容器p1的引用。

var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;

说明：
文本Hello实际上是容器p1的孙子节点，所以我们可以用oP1.firstChild得到<b>元素，oP1.firstChild.firstChild也就是Hello文本节点的引用了，而World则就是容器p1的最后一个节点了。

下一步，建立range然后设置偏移(offset)：

var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);

说明：
对于setStart()，偏移(offset)为2，因为字母l在该文本节点中(即Hello中)的位置是2，(位置是从0开始计算的)，设置setEnd()方法中的偏移为3，原因同上，需要注意的是World前面有一个空格，空格也是占位置的。如图：

Javascript标准DOMRange操作全集_基础知识 - 文章图片

注意：
(Mozilla DOM Range bug #135928)在 Mozilla低版本浏览器执行此Range方法时，如果setStart()和setEnd()都指向同一个文本节点会出现异常

用DOM Range做一些操作
当创建一个Range对象时，在Range里的所有对象之上，已经创建了一个文档的fragment节点。在这之前，Range对象必须合格证你选择的这段Range是一个well-formed（格式良好）。
比如以面这段Range

Javascript标准DOMRange操作全集_基础知识 - 文章图片

很明显的，在这里，并不是一个well-formed，上面说过了，当创建一个Range时，会自动产生一个fragment，在这里，framgment自动动态的添加一些元素，以保证Range的正确性：

<p><b>He</b><b>llo</b> World</p>

也就是自动加上了开始标签<b>，使得整个Range变为<b>llo</b> Wo，fragment的示意图为：

Javascript标准DOMRange操作全集_基础知识 - 文章图片

当此fragment创建后，你就可以用Range的一些方法来操作它了。

最简单的一个操作就是：deleteContents()方法，这个方法将删除Range选中的部分，在上面的操作之后进行deleteContents()，那么余下的HTML就为：

之所以加上闭合标签</b>，上面也说了，也是Range为了确保它是well-formed。

extractContents()方法类似于deleteContents()，但具体操作不同，extractContents()是将选中的Range从DOM树中移到一个fragment中，并返回此fragment，复制下面这些代码然后在Mozilla Firefox里运行，看看结果你就明白了。——删除的<b>llo</b> Wo作为一个fragment被添加到body的末端。

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
var oFragment = oRange.extractContents();
document.body.appendChild(oFragment);
</script>

cloneContents()方法可以克隆选中Range的fragment，比如：

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
var oFragment = oRange.cloneContents();
document.body.appendChild(oFragment);
</script>

这个方法类似于extractContents()，但是不是删除，而是克隆。

从Range中插入一些数据

前一节的几个方法解决了如何移除range中所选中的fragment。现在说明如何添加内容到Range中。
insertNode()方法可以插入一个节点到Range中。假如我想把以下的节点插如Range中，将如何操作呢？
<span style="color: red">Inserted text</span>

看下面的代码：

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.color = "red";
oSpan.appendChild(document.createTextNode("Inserted text"));

oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.insertNode(oSpan);
</script>

那么原来的HTML将会变成这样：
<p id="p1"><b>He<span style="color: red">Inserted text</span>llo</b> World</p>

surroundContents()的参数为一个node，它将这个node加入到Range，下面看这个示例。

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.backgroundColor = "yellow";

oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.surroundContents(oSpan);
</script>

在oRange选取的范围内有一个我们新生成的节点span，因此选取的Range的背景变成了黄色。

collapse()方法：

collapse()方法只有一个布尔型的参数，该参数为可选的，也就是说，可以有，也可以没有，默认为false。
true时折叠到Range边界的首部，为false时折叠到Range尾部。即

Javascript标准DOMRange操作全集_基础知识 - 文章图片

如果你想知道该Range是否已经折叠，可以用collapsed属性来得到true或者false。看下面的例子。

<p id="p1">Paragraph 1</p><p id="p2">Paragraph 2</p>
<script>
var oP1 = document.getElementById("p1");
var oP2 = document.getElementById("p2");
var oRange = document.createRange();
oRange.setStartAfter(oP1);
oRange.setStartBefore(oP2);
alert(oRange.collapsed); //outputs "true"
</script>

上面的代码输为true。虽然我们没有用collapse方法，但是由于我们的Range设置开始为1末端到p2的首端，没有任何元素。即</p>(Range开始)(Range结束)<p id="p2">，所以显示的是true。

Range边界的比较

compareBoundaryPoints()方法，语法形式如下：
compare = comparerange.compareBoundaryPoints(how,sourceRange)

参数含义：
compare —— 返回1, 0, -1.（0为相等，1为时，comparerange在sourceRange之后，-1为comparerange在sourceRange之前）
how —— 为Range常数：END_TO_END|END_TO_START|START_TO_END|START_TO_START
sourceRange —— 一个Range对象的边界。

看下面的例子：

<p id="p1"><b>Hello</b> World</p>
<script>
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNodeContents(oP1);
oRange2.selectNodeContents(oP1);
oRange2.setEndBefore(oP1.lastChild);
alert(oRange1.compareBoundaryPoints(Range.START_TO_START, oRange2));
//outputs 0
alert(oRange1.compareBoundaryPoints(Range.END_TO_END, oRange2));
//outputs 1;
</script>

下图为这两个Range的示意图，结合代码和上面的说明，可以清晰的分析出结果了。

Javascript标准DOMRange操作全集_基础知识 - 文章图片

克隆(clone)Range

这个操作很简单，只需要一句语句即可：

var oNewRange = oRange.cloneRange();

cloneRange()方法将返回一个当前Range的副本，当然，它也是Range对象。

清除Range所占的系统资源

当你创建了Range对象最好用detach()方法来清除它所占的系统资源。虽然不清除，GC（垃圾收集器）也会将其收集，但用detach()释放是一个好习惯。语法为：

oRange.detach();

下面一个示例在Mozilla中，利用Range可以模拟出IE中的element.insertAdjacentHTML()方法，

if (browser.isMozilla) {
HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) {
var df; var r = this.ownerDocument.createRange();
switch (String(sWhere).toLowerCase()) {
case "beforebegin":
r.setStartBefore(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this);
break;
case "afterbegin":
r.selectNodeContents(this);
r.collapse(true);
df = r.createContextualFragment(sHTML);
this.insertBefore(df, this.firstChild);
break;
case "beforeend":
r.selectNodeContents(this);
r.collapse(false);
df = r.createContextualFragment(sHTML);
this.appendChild(df);
break;
case "afterend":
r.setStartAfter(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this.nextSibling);
break;
}
};
}

内容总结

以上是互联网集市为您收集整理的Javascript标准DOMRange操作全集_基础知识全部内容，希望文章能够帮你解决Javascript标准DOMRange操作全集_基础知识所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/306046.html

来源：【匿名】

【上一篇】智能表格_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【Javascript标准DOMRange操作全集_基础知识】教程文章相关的互联网学习教程文章

Leetcode刷题预备基础知识（JavaScript版）【图】

参考：https://www.bilibili.com/video/BV14f4y1C7hg 宝藏up主！1.时间复杂度O(1)O(n)复杂度看最高的O(n2) 如果只是两个并列的for循环，时间复杂度还是O（n），100个并列的for循环，也是O(n)这里有继承，两个循环分摊一个任务O(logn)二分搜索O(nlogn)排序优化的方法:从低-级的复杂度寻找灵感O(n)->O(logn)使用二分搜索O(nlogn) -> O(n)遇到需要排序的题，想想能否通过数组,set, map,heap解O(n2)-> O(nlogn)遇到嵌套循环，想想能不能...

JavascriptDom的基础知识回顾【代码】

1. 节点及其类型: 1). 元素节点2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert(‘hello world‘);">Click Me!</button> 　　缺点: ①. js 和 html 强耦合, 不利用代码的维护 ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然...

11-23网页基础--JavaScript基础知识【图】

第一课 JavaScript简介一、定义：JavaScript是脚本语言，需要宿主文件，它的宿主文件是html文件。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。二、用法：在html中的位置有三块：1）head里面；2）body里面；3）</html>之后，为了保险起见一般写在</html>之后。<script language="javascript">代...

JS基础知识总结

js基础知识点总结如何在一个网站或者一个页面，去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs)常用内部类:Data Array Math StringHTML属性，CSS属性HTML：属性.HTML属性="值"；CSS：对象.style.CSS属性="值";class和float1.class:className2.float:cssFloat获取对象id:document.getElementById("id 名")事件...

JavaScript基础知识----六道有趣的Js基础题以及解答【代码】

题目：1.找出数字数组中最大的元素（使用Math.max函数）2.转化一个数字数组为function数组（每个function都弹出相应的数字）3.给object数组进行排序（排序条件是每个元素对象的属性个数）4.利用JavaScript打印出Fibonacci数（不使用全局变量）5.实现如下语法的功能：var a = (5).plus(3).minus(6); //26.实现如下语法的功能：var a = add(2)(3)(4); //9解答：1.var a = [10,1,2,3,4,8,9]; function max(a){var len = a.length-1;va...

JavaScript基础知识

一、JavaScript脚本语言的特性 JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性:1、在客户端执行。完全在用户的计算机上运行，无须经过服务器。2、面向对象。具有内置对象，也可以直接操作浏览器对象。3、动态变化。可以对用户的输入作出反应，也可以直接对用户输出。4、简单易用。JavaScript脚本语言虽然简单，但初学者也能快速掌握。5、只能与HTML语言一起使用。要通过浏览器解释执行。二、如何在...

JavaScript基础知识梳理----数据类型

JavaScript数据类型JavaScript的数据类型有六大类：Undefined、null、string、number、object、boolean1.Undefined ---使用var声明变量但未初始化，对未初始化的变量或尚未定义的变量使用typeof运算符均会返回undefined问题：区分空对象指针和尚未定义的变量使用typeof检测，尚未定义的变量返回的是undefined，而空对象指针返回的是object2.Null逻辑上null表示一个空对象指针使用typeof检测时会返回object Null和undefined的关系...

JavaScript基础知识——作用域和闭包【代码】

作用域和闭包Q: 1.说一下对变量提升的理解　　　　2.说明this几种不同的使用场景　　3.创建10个<a>标签，点击时弹出对应序号var i; for(i = 0; i < 10; i++){(function(i){var a = document.createElement(‘a‘);a.innerHTML = i + ‘<br>‘;a.addEventListener(‘click‘, function(e){e.preventDefault();alert(i);});document.body.appendChild(a)})(i) } 　　4.如何理解作用域　　5.实际开发中闭包的应用// 闭包实际...

JavaScript基础知识整理（1）【图】

粗略理解，努力入门中1、在html中引入外部脚本： <script src="filename.js"></script>2、注释：多于一行的长注释使用 /*注释内容 */ ，只有一行的注释用 //注释内容。3、创建函数的格式:function name（）{　　函数的内容}在函数内部创建的变量为局部变量，只有在函数的内部有效，在所有函数之外创建的变量为全局变量，整个代码中的任何地方都能使用。 4、getElementById() 通过id获得和操作元素； getElementByValue...

Javascript基础知识盲点总结——数据类型和数组

一、javascript总的基本类型1.javascript中的基本类型共有五种：数字、字符串、布尔值、undefined、null其中null和undefined最大的区别在于，被赋予null的变量通常被认为是已经定义了的。2.除了以上五种基本类型外，其他的数据类型都属于对象。二、利用typeof方法查看数据类型在javascript中可以通过typeof方法来查看某个变量或值得数据类型。该方法会返回一个代表数据类型的字符串，可能返回的值包括：number,string, boolean, un...

JavaScript 之基础知识【代码】

JavaScript 基础知识JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。JavaScript 很容易使用！你一定会喜欢它的！ JavaScript 简介在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，...

JavaScript基础知识(javaSctipt深入浅出学习)【代码】【图】

1、javascript的数据类型　　1.1 javaScript是弱类型的语言，也就是说它没有显示的指定类型，通常说有6中基本类型　　　　分别是5种原始类型（number, String, boolean, null, undefined）和一种对象类型（包括数组，函数等...）　　1.2 javaScript的隐式转换，加号和减号　　1.3 严格等于（‘===‘）：　　　　类型不同会返回false， null === null, undefined === undefined　　　　NaN != NaN(不严格相等), new Object != new ...

Javascript基础知识盲点总结——函数

一、函数中的arguments对象每个函数内部都有一个arguments，它能返回函数所接受的所有参数注意：argumens接收的是实参如下是利一个利用arguments特性编写的求和函数：function sumOnSteroids(){ var I, res = 0; var number_of_params = arguments.length; for(I = 0; I < number_of_params; i++){res += arguments[i]; } return res; } 二、关于变量的作用域在javascript中，不能为变量定义特定的块级作用域，但是可以定义其所属的...

JavaScript基础知识（变量/引用/转换/函数）【代码】【图】

———————————————————————————————————————————— 变量全局变量：在函数体外声明，全局可以使用局部变量：通过关键字var来声明变量类型 1 <script type="text/javascript">2var a;3// 十进制 4 a = 1;5 a = 1.2;6 a = -23;7 a = .23e4;8 a = 3e-2;9// 十六进制10 a = 0xABCDE; 11 a = 0Xff; 12// 八进制13 a = 0123; 14 a = 01234567; 15// ...

javascript基础知识(7) 条件判断【代码】

JavaScript使用if () { ... } else { ... }来进行条件判断。例如，根据年龄显示不同内容，可以用if语句实现如下：var age = 20; if (age >= 18) { // 如果age >= 18为true，则执行if语句块alert(‘adult‘); } else { // 否则执行else语句块alert(‘teenager‘); }其中else语句是可选的。如果语句块只包含一条语句，那么可以省略{}：var age = 20; if (age >= 18)alert(‘adult‘); elsealert(‘teenager‘);省略{}的危险之处在于，...

首页 / JAVASCRIPT / Javascript标准DOMRange操作全集_基础知识

Javascript标准DOMRange操作全集_基础知识

内容导读

内容图文

内容总结

内容备注

内容手机端

【Javascript标准DOMRange操作全集_基础知识】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

DOM - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程