Javascript 从点获取DOM文本节点？_Javascript_Dom

Javascript 从点获取DOM文本节点？

javascript dom

Javascript 从点获取DOM文本节点？,javascript,dom,Javascript,Dom,就像我可以通过document.elementFromPoint或document.getElementFromPoint从点获取元素一样，如果点位于文本节点，是否可以以某种方式获取文本节点？我想，如果我至少可以得到文本节点的位置和大小，那么我就可以找出其中哪个节点包含该点。但是DOM节点没有位置属性。可以这样做吗？您可以使用元素.nodeName查看它是否是文本节点，然后使用元素.nodeValue查看其值。考虑此文档（）：当您单击标记内的任何位置时，标记元素本身将被记录。但是，当单击周围的

就像我可以通过

document.elementFromPoint

或

document.getElementFromPoint

从点获取元素一样，如果点位于文本节点，是否可以以某种方式获取文本节点？我想，如果我至少可以得到文本节点的位置和大小，那么我就可以找出其中哪个节点包含该点。但是DOM节点没有位置属性。可以这样做吗？

您可以使用

元素.nodeName

查看它是否是文本节点，然后使用

元素.nodeValue

查看其值。

考虑此文档（）：

当您单击

标记内的任何位置时，标记元素本身将被记录。但是，当单击周围的文本时，会返回

，因为文本片段不被视为元素

结论

使用

elementFromPoint（）

不可能实现您想要的功能，而且由于文本片段不接收单击事件，我认为这根本不可能。

以下是一个在所有当前浏览器中都能工作的实现：

document.betanodecompoint=函数（x，y）{
var el=document.elementFromPoint（x，y）；
var节点=el.childNodes；
对于（变量i=0，n；n=nodes[i++]；）{
if（n.nodeType==3）{
var r=document.createRange（）；
r、 选择节点（n）；
var rects=r.getClientRects（）；
for（var j=0，rect；rect=rects[j++]；）{
if（x>rect.left&&xrect.top&&y

对于Firefox，您应该使用

document.caretPositionFromPoint

下面是一个greap演示：

对于Chrome和Edge，请尝试

document.caretRangeFromPoint（x，y）

我假设

getElementFromPoint

只返回元素节点。啊，是的，你是对的：声明

元素必须是元素对象

（与文本对象不同的XML类型）非常好，我刚刚完成了这个精确的函数的编写~哦，好吧：）让我投票算出

createRange

部分，花了我几分钟的时间才想到：PThanks！你是最好的：）唉，这是一个Firefox特有的功能：-（@Michael yah对于其他浏览器，请尝试document.caretRangeFromPoint（x，y）

<html>
<body>
    some text here 
    <p id="para1">lalala</p> 
    bla bla
</body>
</html>

$(document).on('click', function(evt) {
    var elem = document.elementFromPoint(evt.clientX, evt.clientY);
    console.log(elem);
});

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;
};