原文来自TextRange object。
textRange对象代表document中一个一连的部份。

TextRange对象为完成一些实用功用供应了几个属性和要领。应用TextRange对象，你可以获得并修正文档的恣意部份；你可以获得文档中的一个一连部份的定位以及一些别的的多少属性；你可以获得并修正文档中已选中的内容。

Internet Explorer以及部份Opera浏览器支撑TextRange对象。

在火狐、Opera、Google Chrome以及Safari中，Range对象供应了简朴的功用。Internet Explorer 9.0今后的版本一样支撑Range对象。

由于一切的当代浏览器都支撑Range对象，只要在Range对象不被支撑的情况下才运用TextRange对象。本文背面的内容将一同引见这两个对象。

竖立一个TextRange对象有三个要领：

• 经由过程createTextRange要领竖立一个TextRange对象。body对象以及一些别的的HTML元素支撑createTextRange要领。新竖立的TextRange对象的边境点（最先点和完毕点）与这些HTML元素的内容对齐。
  • 你可以运用document.createRange要领竖立一个空的Range对象。背面的章节形貌了修正一个Range对象的边境点的要领。

• 在Internet Explorer中，有三种差别范例的选区（selection）：

  • 控件选区 – 选区包括了控件。
  • 文本选区 – 选区只包括文本。
  • 空选区 – 即没有选区（或许说选中的内容是不可用的）。

  应用selection对象的type属性可以获得选区的范例。当选区包括文本或许没有选中的内容时，用selection对象的createRange要领可以获得一个TextRange对象。返回的TextRange对象的边境点与选区的内容对齐。

  为了获得选区的内容，selection对象还支撑别的的要领，比如说createRangeCollection要领，它返回一个TextRanges鸠合，包括了若干个TextRange对象。每一个TextRange对象代表这个选区的一个一连部份。该createRangeCollection要领对多重选区来讲很有效。然则Internet Explorer不支撑它。所以运用createRange要领就足够了。

  运用selectionRange对象的getRangeAt要领可以获得一个代表当前选区的Range对象。selectRange对象可以包括凌驾一个Range对象。每一个Range对象代表选区的一个一连部份。

  在Internet Explorer、Opera、Google Chrome、Safari以及低于3.0版本的火狐浏览器中，至少有一个Range对象属于selectionRange对象，由于文本选区永远是一个DOM条理构造的一连部份。

  在3.0版今后的火狐浏览器中，鼠标选网页内容时按住Ctrl键，可以选中多个文本域。假如你想选中离散的文本块，请运用addRange要领。

• 运用duplicate要领可以复制出一个已有的TextRange对象的副本。返回的对象与原始对象完全相同。

假如已存在一个TextRange对象的实例，你可以用下面的要领修正它的边境：

• 假如你想把一个TextRange对象的边境点与一个元素的内容对齐，而且这个元素支撑createTextRange要领，请在这个元素上运用createTextRange要领。对别的元素，请运用body.createTextRange要领来竖立一个TExtRange对象，并对这个必要的元素运用moveToElementText要领。

  假如你想把一个Range对象的边境点与一个元素或元素的内容对齐，请运用selectNode或selectNodeContents要领。

• 运用moveStart要领和moveEnd要领可以挪动一个TextRange对象的最先点的完毕点。假如你想把一个TextRange对象的最先点和完毕点与另一个TextRange对象的最先点和完毕点对齐，请运用setEndPoint要领。

  假如你想离别地修正一个Range的最先点和完毕点，请运用setStart要领、setStartBefore要领、setStartAfter要领，以及setEnd要领、setEndBefore要领、setEndAfter要领。

• 应用collapse要领，你可以挪动最先点或许完毕点，反之亦然。TextRange对象和Range对象都可以用这个要领。

• 扩大TextRange对象的内容，请运用expand要领以完成它。

假如你一个TextRange对象的定位，你可以：

• 应用offsetLeftc以及offsetTop属性，可以获得该TextRange对象的坐标。不能获得该元素以及一个TextRamge对象用最先点和完毕点定义的偏移。

  • 假如你要获得一个TextRange对象的矩形边境，请运用boundingLeft、boundingTop、boundWidth以及boundingHeight属性。

  • 假如你要获得一个TextRange对象的正确外形，请运用getClientRects要领。它将获得一个TextRectangles鸠合，包括了几个TextRectangle对象。每一个TextRectangle对象代表属于这个TextRange对象的一行文本。

  上面的提到一切的坐标都是相对于浏览器窗口的左上角的。

  • document.elementFromPoint要领可以协助你获得位于指定坐标上的元素。

  • 这个包括了全部TextRange对象的元素，假如你想要获得它在DOM条理构造中元素的深度，请运用parentElement要领。

  一个Range对象是用最先点和完毕点定义的。一个元素以及一个位置定义了一个点。假如这个元素只要文本内容（TextNode、CDATASection或许CommentNode），这个位置指定了元素中的一个字符位置；假如这个元素并不是只要文本内容，这个位置指定了元素中一个子元素的序号索引。

  和(endContainer,endOffset)属性指定了一个Range对象的最先点和完毕点。startOffset属性指定在这个startContainer元素中Range最先的位置。endOffset属性指定了在这个endContainer元素中Range完毕的位置。

  假如你想获得包括了全部Range对象的元素在DOM条理构造中节点的深度，请运用commonAncestorContainer属性。

• 当一个TextRange的最先点和完毕点是同一个位置的时刻，这个TextRange对象就是压缩的。你可以用多种要领来检测它是不是处于压缩状况。比如说，用TextRange对象的文本内容来检测。用text属性可获得一个TextRange对象的文本内容，并作为字符串来看待。假如这个text属性代表的字符串的长度返回0，则TextRange对象是压缩的。

  运用collapsed要领可以检测Range对象是不是处于压缩状况。

• 比较两个TextRange对象的定位，可以运用compareEndPoints要领。它比较了这些对象的边境点。

  要想检测一个TextRange对象是不是包括另一个TextRange对象，可以用inRange要领。isEqual要领检测两个TextRange对象是不是是完全相同的。

  两个Range对象的定位可以经由过程compareboundaryPoint要领来比较。它比较了这些对象的边境，类似于TextRange对象中的compareEndPoints要领。

  请注意，虽然compareboundaryPoints要领和compareEndPoints要领的语法是类似的，然则一样的案例，在差别的浏览器中，它们的行动是差别的。请浏览这两个要领的页面以相识细致区分。

  假如你想检测一个点（一个(element,position)对，个中position指定了element内部的一个索引或许说一个字符位置）是不是位于一个Range内部，请运用comparePoint或许isPointInRange要领。

操纵一个TextRange对象的内容：

• text属性可以设置或获得一个TextRange对象的文本内容，作为一个字符串。

  假如你须要HTML花样的内容，请运用htmlText属性。

  假如要替代一个带有HTML花样文本的TextRange对象的内容，请运用pasteHTML要领。你还可以用这个要领来删除这些内容（只须要在挪用pasteHTML时用空字符串作为参数。）

  toString要领获得一个Range对象的文本内容，作为一个字符串。

  • 假如你须要以条理构造DOM的情势获得一个Range对象的内容，请运用cloneContents要领和extractContents要领。这两个要领会从Range内容中竖立一个DocumentFragment对象。
  • 要想从document中移除一个Range对象的内容，请运用deleteContents要领。
  • 要想向Range对象中插进去一个新元素，请运用insertNode要领。

挑选一个TextRange对象的内容：

• 直接挪用TextRange对象的select要领（多文本选区中这个要领不可用）。
  > 起首挪用window.getSelection要领来吸收一个从属于当前选区的selectionRange对象。假如你想给当前选区 增加一个Range的内容，直接挪用addRange要领就可以把这个Range对象增加到selectionRange对象中。假如你只想要一个被选中的Range的内容，在挪用addRange要领到场这个Range对象之前，先挪用selectionRange对象的removeAllRanges要领。

TextRange对象的一些分外的功用：

• 可以用execCommand要领编辑一个TextRange对象的内容，就像在富文本编辑器中那样。你可以修正背景色或许前景色，你可以使字体变成粗体、斜体，你可以用剪贴板剪切、复制以及粘贴内容，它供应了一些别的的功用。

• 用getBookmark要领，可以把一个TextRange对象保留为bookmark。以后可以用moveToBookmark要领竖立一个TextRange对象。该bookmark，以及这个用moveToBookmark要领竖立的TextRange对象与被保留的谁人TextRange对象是完全相同的。

语法：

用下面的要领可以接见textRange对象：

• selection.createRange()
• object.createTextRange()
• TextRanges.item(index)

能够的成员：

属性：

要领

[1]定位父元素（offsetParent）：定位父元素并不是是DOM条理构造中的parentElement，而是离该元素近来的一个position属性为relative、absolute、static的上层级元素。假如上层级元素中没有如许的元素，则定位父元素就是document.body。

HTML代码示例1：

这个示例演示了一个在document中获得选中内容的跨浏览器解决方案。

HTML<head>
    <script type="text/javascript">
        function TestSelection () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selectionRange = window.getSelection ();                                        
                alert ("The text content of the selection:\n" + selectionRange.toString ());
            } 
            else {
                if (document.selection.type == 'None') {
                    alert ("No content is selected, or the selected content is not available!");
                }
                else {
                    var textRange = document.selection.createRange ();
                    alert ("The text content of the selection:\n" + textRange.text);
                }
            }
        }
    </script>
</head>
<body>
    Select some text or <button>element</button>, or do not select anything, before you click on the button below.
    <br /><br />
    <button onclick="TestSelection ();">Test the selection!</button>
</body>

HTML代码示例2：

这个跨浏览器解示例演示了如何用range对象删除一个元素中的内容：

HTML<head>
    <script type="text/javascript">
        function RemoveContent () {
            var srcObj = document.getElementById ("src");

            if (document.createRange) {     // all browsers, except IE before version 9
                var rangeObj = document.createRange ();
                rangeObj.selectNodeContents (srcObj);
                rangeObj.deleteContents ();
            }
            else {      // Internet Explorer before version 9
                var rangeObj = document.body.createTextRange ();
                rangeObj.moveToElementText (srcObj);
                rangeObj.select ();
                rangeObj.execCommand ('cut');
            }
        }
    </script>
</head>
<body>
    <div id="src" style="background-color:#e0a0b0; width:300px; height:50px;">The <b>contents</b> of the <i>source</i> element.</div>
    <br /><br />
    <button onclick="RemoveContent ();">Remove the contents of the source element!</button>
</body>