如何获取突出显示的所有元素 [英] How to get all elements that are highlighted
问题描述
我想获取用户突出显示区域中的所有元素。问题是,当元素位于树的不同部分时,我不知道如何遍历DOM的不同部分。我的代码到目前为止只能从选择范围的startContainer中获取元素。我需要某种递归吗?这是我的代码:
I want to get all of the elements in a user highlighted area. The problem is that I don't know how to traverse to different parts of the DOM, when the elements are on a different part of the tree. My code so far can only get the elements off the startContainer of the selection range. Do I need some sort of recursion? Here is my code:
getSelectedElementTags:function()
{
var range, sel, container;
sel = content.window.getSelection();
if (sel.getRangeAt)
{
if (sel.rangeCount > 0)
{
range = sel.getRangeAt(0);
}
}
else
{
range = content.window.createRange();
range.setStart(sel.anchorNode, sel.anchorOffset);
range.setEnd(sel.focusNode, sel.focusOffset);
alert("range created");
}
if (range)
{
container = range["startContainer"];
var elms = container.parentNode.getElementsByTagName("*");
elmlist = "parent: "+container.parentNode.tagName + " (" + elms.length + ")\n";
for (i in elms)
{
if (elms[i].tagName != null)
{
elmlist += elms[i].tagName+"\n";
}
}
alert(elmlist);
}
},
推荐答案
您可以使用 TreeWalker
使用 document.createTreeWalker
。下面是一个例子。它列出部分或完全选择的所有元素。您可以通过修改传递给的参数来轻松更改行为。document.createTreeWalker
。
请注意,在Firefox中,不需要检查选择的 getRangeAt
方法的存在。此检查仅适用于旧版本的WebKit。另外,IE< 9不支持TreeWalker或Range,因此以下内容将无法在这些浏览器中使用。
Note that in Firefox you don't need to check for the existence of the getRangeAt
method of a selection. This check is only required for older versions of WebKit. Also, IE < 9 does not support TreeWalker or Range, so the following won't work in those browsers.
修改 p>
Edit Fixed as per comments below.
function rangeIntersectsNode(range, node) {
var nodeRange;
if (range.intersectsNode) {
return range.intersectsNode(node);
} else {
nodeRange = node.ownerDocument.createRange();
try {
nodeRange.selectNode(node);
} catch (e) {
nodeRange.selectNodeContents(node);
}
return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
}
}
function getSelectedElementTags(win) {
var range, sel, elmlist, treeWalker, containerElement;
sel = win.getSelection();
if (sel.rangeCount > 0) {
range = sel.getRangeAt(0);
}
if (range) {
containerElement = range.commonAncestorContainer;
if (containerElement.nodeType != 1) {
containerElement = containerElement.parentNode;
}
treeWalker = win.document.createTreeWalker(
containerElement,
NodeFilter.SHOW_ELEMENT,
function(node) { return rangeIntersectsNode(range, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; },
false
);
elmlist = [treeWalker.currentNode];
while (treeWalker.nextNode()) {
elmlist.push(treeWalker.currentNode);
}
console.log(elmlist);
}
}
<input type="button" onclick="getSelectedElementTags(window)" value="Get selected elements">
这篇关于如何获取突出显示的所有元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!