javascriptdom

Get DOM text node from point?


Just like I can get an element from a point with document.elementFromPoint or document.getElementFromPoint, is it possible to somehow get a text node if the point is at a text node? I guess if at least I could get the text node's position and size I could then figure out which of them contains the point. But then DOM nodes don't have position properties. Is it possible to do this at all?


Solution

  • Here is an implementation that works in all current browsers: https://github.com/nuxodin/q1/blob/master/q1.dom.js

    document.betaNodeFromPoint = function(x, y){
        var el = document.elementFromPoint(x, y);
        var nodes = el.childNodes;
        for ( var i = 0, n; n = nodes[i++];) {
            if (n.nodeType === 3) {
                var r = document.createRange();
                r.selectNode(n);
                var rects = r.getClientRects();
                for ( var j = 0, rect; rect = rects[j++];) {
                    if (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) {
                        return n;
                    }
                }
            }
        }
        return el;
    };