所以我觉得自己在这里有点脱离我的联盟了。但是,这就是我想要做的。
基本上,我希望用户选择段落中的一部分文本(可能包含许多元素(即<span>
和<a>
))以返回该段落的id属性的值。这就是我的想法。
function getParaID() //function will be called using a mouseUp event
{
var selObj = window.getSelection();
var selRange = selObj.getRangeAt(0); //btw can anyone explain what this zero means
var paraElement = selRange.commonAncestorContainer;
var paraID = paraElement.getAttribute;
return paraID;
}
你怎么看?我靠近吗?
最佳答案
选择范围的commonAncestorContainer
属性可以是对文本节点的引用,或者是<span>
或<a>
元素或<body>
元素的引用,或者是页面中可能包含的其他内容。在这种情况下,您需要处理DOM树以找到包含的<p>
元素(如果存在)。您还需要知道IE window.getSelection()或DOM Range,尽管可以在IE
jsFiddle:http://jsfiddle.net/44Juf/
码:
function getContainingP(node) {
while (node) {
if (node.nodeType == 1 && node.tagName.toLowerCase() == "p") {
return node;
}
node = node.parentNode;
}
}
function getParaID() {
var p;
if (window.getSelection) {
var selObj = window.getSelection();
if (selObj.rangeCount > 0) {
var selRange = selObj.getRangeAt(0);
p = getContainingP(selRange.commonAncestorContainer);
}
} else if (document.selection && document.selection.type != "Control") {
p = getContainingP(document.selection.createRange().parentElement());
}
return p ? p.id : null;
}
关于传递给
0
的getRangeAt()
,这表示您要选择哪个范围。 Firefox支持多个选定范围:如果您进行选择,然后按住Ctrl并进行另一个选择,则会看到您现在选择了两个不连续的范围,可以通过getRangeAt(0)
和getRangeAt(1)
进行访问。同样在Firefox中,选择表格中的一列单元格会为每个选定的单元格创建一个单独的范围。可以使用选择的rangeCount
属性获得所选范围的数量。没有其他主流浏览器支持多个选定范围。关于javascript - javascript获取“commonAncestorContainer”的ID,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6897187/