javascript 获取“commonAncestorContainer”的 id

Question

javascript 获取“commonAncestorContainer”的 id

所以我觉得我有点格格不入。但这就是我想做的。

基本上，我想让用户选择段落中的部分文本（可能包含许多元素（即<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;
 }

Run Code Online (Sandbox Code Playgroud)

你怎么认为？我很接近吗？

Answer 1

Tim*_*own 5

选择范围的属性可以是对文本节点、或元素或元素、或页面中可能具有的任何其他内容的commonAncestorContainer引用。既然如此，您需要在 DOM 树中查找包含元素（如果存在）。您还需要注意 IE < 9 不支持DOM Range，尽管可以在 IE < 9 中轻松地执行您想要的操作。以下是一些适用于所有主要浏览器（包括 IE 6）的代码：<span><a><body><p>window.getSelection()

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;
}

Run Code Online (Sandbox Code Playgroud)

关于0传递给getRangeAt()，表示您想要选择哪个范围。Firefox 支持多个选定范围：如果您进行选择，然后按住Ctrl并进行另一个选择，您将看到现在选择了两个不连续的范围，可以通过getRangeAt(0)和访问它们getRangeAt(1)。同样在 Firefox 中，选择表格中的一列单元格会为每个选定的单元格创建一个单独的范围。rangeCount可以使用选择的属性来获取所选范围的数量。没有其他主要浏览器支持多个选定范围。

归档时间：	14 年，4 月前
查看次数：	3130 次
最近记录：	14 年，4 月前