获取选择的周围 DOM 节点答案

【问题标题】：Get surrounding DOM node of selection获取选择的周围 DOM 节点
【发布时间】：2012-09-18 21:28:25
【问题描述】：

我需要从选定的文本中获取周围的 DOM 节点。如何使用 Firefox 附加 SDK 做到这一点？或者我可以在我的扩展程序中使用其他任何可能性吗？

例如（选中的是大写） <b class='foo'>here is SELected text</b>

目的是获取类名。

【问题讨论】：

getfirebug.com?右键单击，检查元素？
@Rob A：“例子？”获取周围 DOMNode 的可行性和方法比示例的适当扩展重要得多。
也许我误解了你想要的。例如，您可以为 DOM 中的每个元素声明一个单击函数，并且回调显示被单击元素的类名。

标签： javascript firefox dom firefox-addon firefox-addon-sdk

【解决方案1】：

内容脚本可以访问window.getSelection() object。从理论上讲，一个选择可以由几个不同的范围组成。但是，我从未见过多范围选择，您可能想假设只有第一个范围是相关的。范围有一个commonAncestorContainer property，它允许您获取包含所有选定文本部分的元素。这意味着您需要在内容脚本中执行类似的操作：

var selection = window.getSelection();
if (selection.rangeCount >= 1)
{
  var range = selection.getRangeAt(0);
  alert(range.commonAncestorContainer.className);
}

【讨论】：

【解决方案2】：

选择不一定只有一个父节点。选择范围的端点可以在不同的节点中，范围内包含任意数量的节点，并且一个选择可以由多个范围组成。 selection 对象实际上相当复杂。

【讨论】：