DOM.Selection 的 anchorOffset 属性答案

【问题标题】：anchorOffset property of DOM.SelectionDOM.Selection 的 anchorOffset 属性
【发布时间】：2013-02-07 23:01:46
【问题描述】：

此链接中的信息是否准确？

https://developer.mozilla.org/en-US/docs/DOM/Selection

根据本文档：

锚点偏移：返回选择的锚点在 anchorNode 内偏移的字符数。

使用 FireFox 进行实验，似乎定义并不总是正确的。有时，偏移属性似乎代表了一定数量的子节点。根据初步测试，以下代码有效：

var sel = window.getSelection() ;
var points = new Array( 0, 0 ) ;
var offset = new Array( sel.anchorOffset, sel.focusOffset ) ;
var nodes = new Array( sel.anchorNode, sel.focusNode ) ;

if ( isText )
    points = offset ;

for ( j = 0 ; j < 2 && ! isText ; j++ ) {
    var kids = nodes[j].childNodes ;
    for ( var i = 0 ; i < offset[j] ; i++ )
        points[j] += kids[i].textContent.length ;
    }

首先，其他人有这种经历吗？其次，我还在尝试寻找一种可靠的方法来确定 isText 的值。

在某些方面，这篇文章部分是一个问题，部分是一个答案。希望 cmets 能反映新的细节。

【问题讨论】：

isText 应该做什么？

标签： javascript dom selection

【解决方案1】：

MDN 的定义是错误的[UDPATE：我现在已经更正了 MDN]。 anchorOffset 和 anchorNode（以及 focusNode 和 focusOffset）就像 Range 边界一样工作：偏移量是文本节点（文本、字符数据和注释节点）内的字符数或anchorNode 的子节点在所有其他节点类型中的选择锚之前。实际上，正如您所观察到的，选择边界并不总是在文本节点内。一个明显的例子是插入符号位于两个相邻图像之间（插入符号由竖线字符表示）：

<div contenteditable="true"><img src="1.png">|<img src="2.png"></div>

Also, Firefox often returns selection boundaries as offsets within elements, especially when a selection selects a whole block element (such as a <p>).其他浏览器不倾向于这样做，而是更喜欢在文本节点内返回偏移量。

至于isText，如果我理解正确的话，完整的实现将类似于以下内容，摘自我自己的代码：

function isCharacterDataNode(node) {
    var t = node.nodeType;
    return t == 3 || t == 4 || t == 8 ; // Text, CDataSection or Comment
}

【讨论】：

感谢您的照顾。