详细解释Javascript中DOM的范围

序

为了让开发人员更容易控制页面，DOM定义了一个“范围”接口。范围允许您选择文档中的某个区域，而无需考虑节点的边界(选择是在后台完成的，用户看不到)。当常规的DOM操作不能更有效地修改文件时，使用范围往往可以达到目的。本文将详细介绍DOM范围。让我们一起来看看。

创建范围

在文档类型中定义了createRange()方法。在兼容DOM的浏览器中，这个方法属于文档对象。您可以通过使用hasFeature()或直接检测此方法来确定浏览器是否支持范围

[注意]IE8-浏览器不支持

var supports Range=document . implementation . has feature(' Range '，' 2.0 ')；var也支持range=(document . create range==' function ')；如果浏览器支持范围，可以使用createRange()创建DOM范围，如下所示

var range=document . create range()；与节点类似，新创建的范围与创建它的文档直接关联，不能用于其他文档。一旦创建了范围，就可以使用它在后台选择文档的特定部分。在创建范围并设置其位置后，还可以对范围的内容执行许多操作，从而实现对底层DOM树的更精细控制

每个范围由类型范围的实例表示，该类型范围有许多属性和方法。

以下属性提供了有关文档中当前范围位置的信息

StartContainer:包含范围起点的节点(即选择中第一个节点的父节点)start offset:start container中范围起点的偏移量。如果startContainer是文本节点、注释节点或CDATA节点，则startoffset是在范围开始之前跳过的字符数。否则，Startoffset是范围中第一个子节点的索引。endContainer:包含范围结尾的节点(即选择中最后一个节点的父节点)。and endContainer中范围末尾的偏移量(遵循与startoffset相同的值规则)Commonstorcontainer:start container和endContainer共享的祖先节点在文档树中的位置最深。当范围被放置在文档中的特定位置时，这些属性将被分配

破坏别人家庭的人

要使用范围选择文档的一部分，最简单的方法是使用选择节点()或选择节点内容()。这两种方法都接受一个参数，即一个DOM节点，然后使用节点中的信息来填充范围。selectNode()方法选择整个节点，包括其子节点。而selectNodeContents()方法只选择节点的子节点

！DOCTYPE htmlhtml正文p id='p1'Hello world！/p/body/html我们可以使用以下代码来创建一个范围

var range 1=document . create range()；var range 2=document . create range()；var P1=document . getelementbyid(' P1 ')；//范围{startContainer: body，startOffset: 1，endContainer: body，endOffset: 2，collapsed : false……}范围1 . select node(P1)；//范围{startContainer: p#p1，startOffset: 0，endContainer: p#p1，endOffset: 2，collapsed : false……}范围2 . selectnodecents(P1)；这里创建的两个作用域包含文档的不同部分：rang 1包含p元素及其所有子元素，而rang2包含元素、文本节点“Hello”和文本节点“world！”

在调用selectNode()时，startContainer、endContainer和commonAncestorContainer都等于传入节点的父节点，在本例中是document.body。虽然startoffset属性等于其父节点的childNodes集合中给定节点的索引(在本例中，它是1——，因为兼容DOM的浏览器将空格算作文本节点)，但endOffset等于start