Question

我有这个功能，它返回el的路径。但是，有时此功能会添加页面上不存在的元素。在这种情况下：

<table>
<tr><td></td><tr>
</table>

td的路径看起来像table > tbody > tr > td。这个功能有什么问题？

function getDomPath(el) {
        element = el;
        if (!(el instanceof Element)) return;
        var path = [];
        while (el.nodeType === Node.ELEMENT_NODE &&  el.id != "jobs") {
            var selector = el.nodeName.toLowerCase();
            if (el.id) {
                selector += '#' + el.id;
            }
            else if(el.className){
                console.log(el.className);
                selector += '.' + el.className;
            }
            else {
                var sib = el, nth = 1, count = 1;
                while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling)  && nth++){
                    console.log(Node.ELEMENT_NODE)
                    console.log(el.previousSibling);
                    console.log(el);
                    count += $(el).prevAll().size();
                };
                selector += ":nth-child("+count+")";
            }
            path.unshift(selector);
            el = el.parentNode;
        }
        return path.join(" > ");
    };

Answer 1

如果问题是tbody元素，您需要知道添加它的不是您的功能，而是浏览器本身。使用Firebug或Chrome中的Web Developer工具查看您的页面。

看看this SO answer。

Answer 2

该功能没有问题，它正确使用了所有存在的元素。

如果table元素有任何行，则它始终具有tbody元素。即使您在标记中没有任何标记，浏览器也会添加tbody元素。

即使您的标记不完整或者遗漏了可选标记，浏览器也会创建完整的元素。例如，浏览器会在表格中创建两行，因为您在尝试结束第一行时使用了<td>而不是</td>。它将隐式地结束第一行，开始一个新行，并隐式地结束它。表格中的元素最终会像您将标记编写为：

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>

脚本返回页面上不存在的元素

2 个答案: