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）＆gt; div.mw-body＃content：nth-child（5）＆gt; div.mw-body-content＃bodyContent：nth-child（9）＆gt; div.mw-content-ltr＃mw-content-text：nth-child（7）＆gt;号码：第n个孩子（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

获取HTML对象的路径/“唯一选择器”：为什么它不起作用？

1 个答案: