javascript get id of "commonAncestorContainer"

javascript get id of "commonAncestorContainer"

本文关键字：quot commonAncestorContainer of get id javascript      更新时间：2023-09-26

所以我觉得我有点自不量力。但这是我想做的。

基本上，我想让用户在一个段落(可能包含许多元素(即<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 <9不支持window.getSelection()或DOM范围，尽管可以很容易地在IE中做你想做的事情;9. 下面是一些可以在所有主流浏览器(包括IE 6)上运行的代码:

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

关于传递给getRangeAt()的0，这表明您想要选择哪个范围。Firefox支持多个选择范围:如果你做了一个选择，然后按住Ctrl再做另一个选择，你会看到你现在有两个不连续的选择范围，可以通过getRangeAt(0)和getRangeAt(1)访问。同样在Firefox中，在表中选择一列单元格会为每个选定的单元格创建一个单独的区域。可以使用选择项的rangeCount属性获得所选范围的数量。其他主流浏览器都不支持多选区

你很接近了。如果您想要的只是父元素的id，那么您应该将paraElement.getAttribute替换为paraElement.id，如:

var paraID = paraElement.id;

关于getRangeAt()的参数，它指定要返回的选择范围的索引，它只与允许不连续选择的控件相关。例如，在select框中，用户可以使用ctrl + click同时选择任意几组行。在这种情况下，您可以使用该参数从一个选定区域步进到下一个区域。但是要在段落中突出显示文本，你不应该有一个不连续的选择，因此总是可以通过0。从本质上讲，这意味着你要求"第一个选择的区域"。

还要注意，如果你的界面允许用户的选择跨越多个段落，那么你的commonAncestorContainer可能不是一个段落，它也可能是包含所有段落标签的元素。所以你应该准备好处理这种情况。

编辑:

在玩了一会儿之后，这是我的建议:http://jsfiddle.net/vCsZH/

基本上，这段代码不依赖于commonAncestorContainer，而是对每个段落应用mouseDown和mouseUp侦听器(除了已经应用于顶级容器的侦听器之外)。从本质上讲，监听器将记录选择范围开始和结束的段落，从而更容易可靠地计算出选择了哪些段落。
相关文章：