我正在尝试获取在一个范围对象内的所有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
var c=getSelection().getRangeAt(0).cloneContents(); c.querySelectorAll('*')
- caubcloneContents()
返回标签中所选部分,例如:<strong>Th|is te|xt</strong>
将返回<strong>is te</strong>
(我用 | 标记了所选内容)。 - Gevorg Hakobyan