从document.getSelection（）中获取多个元素

Question

如何获取用户从document.getElementById("hello").onclick = function() { selection = document.getSelection(); if(selection) { console.log(selection.anchorNode.textContent); } }; 中选择的多个元素？

{{1}}

http://jsbin.com/qisawudofa/edit?html,js,console,output

它似乎只返回首先选中的元素，但在我的情况下，我需要获取所有元素。

或者，有没有办法至少知道何时选择了多个元素？

Answer 1

您可能对构成选择的Ranges最感兴趣。请记住，用户可以在整个页面上进行多项选择。每个连续的选择区域都将获得自己的Range实例。

您需要遍历所有范围。对于每一个，您都可以看到它的起始位置和结束位置：

if (selection) {
    for (i=0; i<selection.rangeCount; i++)  {
        range = selection.getRangeAt(i);
        if (range) {
            console.log(range.startContainer);
            console.log(range.endContainer);
        }
    }
}

但是对于您的代码中描述的示例，您还需要考虑另外两件事：

1. 只有当用户非常准确地选择一个段落时，才能获得startContainer中的段落节点。他们可能会在段落开头后开始选择一个字符，然后你会得到一个文本节点，段落作为其父节点。

2. Range仅为您提供该范围选择的开始和结束。它并没有直接给你介于两者之间的所有元素。因此，如果用户选择了超过2个段落，您需要自己确定哪些段落在开始和结束之间。