javascript - 获取 HTML 对象 : why it doesn't work? 的路径/"unique selector"

Question

我正在尝试获取用户选择的对象的路径。我编写了一个代码，但它无法正常工作，我不知道为什么。

这里是:

var selObj = window.getSelection().anchorNode; //chosen html object
var currentCheck = selObj; //element which name is added to path
var path = ""; //path to element
while (currentCheck.tagName != "BODY") {
    currentCheck = currentCheck.parentNode;
    var addToPath = currentCheck.tagName.toLowerCase();

    //class
    if (currentCheck.className != "") {
        var divideClassNames = currentCheck.className.replace(/( {2,})/, '').replace(/ *$/, '').replace(/^ */, '').replace(/\ /g, '.');
        addToPath += "." + divideClassNames;
    }
    //id
    if (currentCheck.id != "") {
        addToPath += "#" + currentCheck.id;
    }

    //nthchild
    var i = 0;
    var child = currentCheck;
    while ((child = child.previousSibling) != null) {
        i++;
    }
    addToPath += ":nth-child(" + i + ")";

    if(path !== ""){
        path = addToPath + " > " + path;
    } else {
        path = addToPath;
    }

}

您可以复制它，突出显示任何网站上的某些文本并在浏览器控制台中运行。

我突出显示了此 Wikipedia article 的前几个词(“家养狗”)我得到的是:

body.mediawiki.ltr.sitedir-ltr.ns-0.ns-subject.page-Dog.skin-vector.action-view:nth-child(2) > div.mw-body#content:nth-child(5) > div.mw-body-content#bodyContent:nth-child(9) > div.mw-content-ltr#mw-content-text:nth-child(7) > p:nth-child(6)

使用:

$("body.mediawiki.ltr.sitedir-ltr.ns-0.ns-subject.page-Dog.skin-vector.action-view:nth-child(2) > div.mw-body#content:nth-child(5) > div.mw-body-content#bodyContent:nth-child(9) > div.mw-content-ltr#mw-content-text:nth-child(7) > p:nth-child(6)")

在浏览器控制台中不返回任何元素(浏览器找不到它)。

在 Firefox 中，有一个选项“复制唯一选择器”。我在我想要获取的路径的对象上使用了它，我得到的是:

#mw-content-text > p:nth-child(4)

如您所见，“nth-child”存在一些问题(我的脚本返回 6，浏览器返回 4)。我在其他网站上尝试过:到处都是只有 nth-child 的问题。

我应该更改什么才能使其正常工作？

Answer 1

你的问题是文本节点

while ((child = child.previousSibling) != null) {
    if (child.nodeType != 3) {
      i++;
    }
}

您在第 n 个子节点的计数中添加了一个文本节点，但您不需要它。 HTML中的所有空白，标签之间，在dom中创建一个文本节点

更多信息http://www.w3schools.com/jsref/prop_node_nodetype.asp