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

Script returns element that not exists on page

本文关键字：不存在 元素 返回 脚本      更新时间：2023-09-26

我有这个函数，它返回我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(" > ");
    };

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

看看这个SO答案。

该函数没有问题，它正确使用了所有确实存在的元素。

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

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

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>
相关文章：