var selectAll = document.querySelector("#selectAll"); var selObj = window.getSelection(); selObj.selectAllChildren(selectAll);
setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)
选中两个特定 DOM
节点之间的内容。
参数:
anchorNode
: 选中内容的开始节点 anchorOffset
:选区起始位置在 anchorNode
内的偏移量。
如果 anchorNode
是文本节点,表示选区起始位置在该节点第几个字符位置。
如果 anchorNode
是元素节点,表示选区起始位置在该节点内第几个子节点的位置。 focusNode
: 选中内容的结束节点 focusOffset
: 选区终止位置在 focusNode
内的偏移量。
如果 focusNode
是文本节点,表示选区终止位置在该节点第几个字符位置。
如果 focusNode
是元素节点,表示选区终止位置在该节点内第几个子节点的位置。
示例:
var start = document.querySelector("#start"); var end = document.querySelector("#end"); var selObj = window.getSelection(); selObj.setBaseAndExtent(start,0,end,0);
toString()
返回代表当前
Selection
对象的字符串,例如当前选择的文本。参数:
无
示例:
var selObj = window.getSelection(); selObj.toString();
Range 对象
Range
对象表示被选中的文档片段。一个 Range
对象可能包含整个元素节点,也可能包含元素节点的一部分,例如文本节点的一部分文字。用户通常只能选择一个 Range
对象,但是有的时候用户也有可能选择多个 Range
对象(只有火狐浏览器可以选择多个 Range
对象)。
可以用 Document 对象的 Document.createRange 方法创建 Range
,也可以用 Selection 对象的 getRangeAt 方法获取 Range
。另外,还可以通过 Document 对象的构造函数 Range() 来得到 Range
。
属性:
collapsed: 返回一个表示起始位置和终止位置是否相同的
Boolean
值。commonAncestorContainer: 返回包含
startContainer
和endContainer
的最深一级的节点。endContainer: 返回包含
Range
终点位置的节点。endOffset:
如果
endContainer
是文本节点、注释节点,返回该节点第一个字到选区边界的字符个数(即被选中的字符个数)。如果
endContainer
是元素节点,返回选区终止位置之后第一个节点之前的同级节点总数。startContainer: 返回包含
Range
开始位置的节点。startOffset:
如果
startContainer
是文本节点、注释节点,返回该节点第一个字到选区边界的字符个数(即未被选中的字符个数)。如果
startContainer
是元素节点,返回选区起始位置第一个节点之前的同级节点总数。
注意:
以上所有属性都是只读属性。
方法:
cloneContents()
返回一个文档片段,它是
Range
对象中所有节点的副本。参数:
无
示例:
// 在文档中插入选中元素 var selObj = window.getSelection(); var rangeObj = selObj.getRangeAt(0); documentFragment = rangeObj.cloneContents(); document.body.appendChild(documentFragment);
cloneRange()
返回一个
Range
对象的副本(两个对象各自做出改变,都不会影响另一方)。参数:
无
示例:
var selObj = window.getSelection(); var rangeObj = selObj.getRangeAt(0); clone = rangeObj.cloneRange();
collapse(toStart)
向开始或结束方向折叠
Range
。参数:
toStart
: 可选,Boolean
值(默认值false
),true
折叠到Range
的开始方向,false
折叠到结束方向。示例:
var selObj = window.getSelection(); var rangeObj = selObj.getRangeAt(0); rangeObj.collapse(true);
compareBoundaryPoints(how, sourceRange)
比较两个
Range
对象的起始位置节点或结束位置节点。参数:
how
表示比较方法的常量:Range.END_TO_END :比较 sourceRange 对象的结束位置节点和原 Range 对象的结束位置节点。 Range.END_TO_START :比较 sourceRange 对象的结束位置节点和原 Range 对象的起始位置节点。 Range.START_TO_END :比较 sourceRange 对象的起始位置节点和原 Range 对象的结束位置节点。 Range.START_TO_START :比较 sourceRange 对象的起始位置节点和原 Range 对象的起始位置节点。
sourceRange
: 一个与原Range
对象比较的Range
对象。返回值
compare
表示一个数字:-1 :原 Range 对象的比较节点在 sourceRange 对象的比较节点之前 0 :原 Range 对象的比较节点在 sourceRange 对象的比较节点的相同位置 1 :原 Range 对象的比较节点在 sourceRange 对象的比较节点之后
示例:
range
var range, sourceRange, compare; range = document.createRange(); range.selectNode(document.querySelector("#rang")); sourceRange = document.createRange(); sourceRange.selectNode(document.querySelector("#sourceRange")); compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);
comparePoint(referenceNode,offset)
判断指定节点是在
Range
对象的之前、相同还是之后位置。参数:
referenceNode
: 与Range
对象进行比较的节点。offset
: 在referenceNode
内的偏移量。
如果referenceNode
是文本节点、注释节点,offset
表示在该节点中字符的偏移位置。
如果referenceNode
是元素节点,offset
表示在该节点中子元素的偏移位置。示例:
range