如何使用JavaScript获取位于范围内的节点?

25

我正在尝试获取在一个范围对象内的所有DOM节点,最好的方法是什么?

var selection = window.getSelection(); //what the user has selected
var range = selection.getRangeAt(0); //the first range of the selection
var startNode = range.startContainer;
var endNode = range.endContainer;
var allNodes = /*insert magic*/;

我已经思考了几个小时,想出了以下方法:

var getNextNode = function(node, skipChildren){
    //if there are child nodes and we didn't come from a child node
    if (node.firstChild && !skipChildren) {
        return node.firstChild;
    }
    if (!node.parentNode){
        return null;
    }
    return node.nextSibling 
        || getNextNode(node.parentNode, true);
};

var getNodesInRange = function(range){
    var startNode = range.startContainer.childNodes[range.startOffset]
            || range.startContainer;//it's a text node
    var endNode = range.endContainer.childNodes[range.endOffset]
            || range.endContainer;

    if (startNode == endNode && startNode.childNodes.length === 0) {
        return [startNode];
    };

    var nodes = [];
    do {
        nodes.push(startNode);
    }
    while ((startNode = getNextNode(startNode)) 
            && (startNode != endNode));
    return nodes;
};

然而,当结束节点是起始节点的父节点时,它会返回页面上的所有内容。我确定我漏掉了一些显而易见的东西?或者我可能完全错误地去做了。 MDC/DOM/range

2
var c=getSelection().getRangeAt(0).cloneContents(); c.querySelectorAll('*') - caub
cloneContents() 返回标签中所选部分,例如:<strong>Th|is te|xt</strong> 将返回 <strong>is te</strong>(我用 | 标记了所选内容)。 - Gevorg Hakobyan
11个回答

0

bob。该函数仅返回startNode和endNode。中间的节点不会被推送到数组中。

似乎while循环在getNextNode()上返回null,因此该块永远不会被执行。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接