How to get all selected items

Question

I want to get all the elements in the selected area of ​​the user. The problem is that I don’t know how to go to different parts of the DOM when the elements are on another part of the tree. My code so far can only retrieve elements from the startContainer 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); } }, 

Answer 1

Using document.createTreeWalker . The following is an example. It lists all items that are partially or fully selected. You can easily change the behavior by changing the parameters passed to document.createTreeWalker .

Please note that in Firefox you do not need to check for the getRangeAt method to select. This check is only required for older versions of WebKit. In addition, IE <9 does not support TreeWalker or Range, so it will not work in these browsers.

Edit Fixed in accordance with the 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">