使用JavaScript，如何判断DOM中的HTML对象是否不在HTML源代码中？

Question

我希望能够找到有关如何检测存在于HTML DOM中但未在HTML源代码中明确表示的对象的想法。

您可能已经知道，如果我的HTML源代码包含以下内容：

<table id="myTbl">
    <tr id="row1">
        <td id="name">George</td>
    </tr>
</table>

... HTML DOM会在对象树中添加<tbody>对象，而不改变源代码，理解源代码的含义。因此，在DOM中，结构就像HTML源代码已经是这样的:

<table id="myTbl">
    <tbody>
        <tr id="row1">
            <td id="name">George</td>
        </tr>
    </tbody>
</table>

我有一个JavaScript函数正在遍历DOM树，我需要检测是否遇到了隐式对象，也就是说，它在DOM中存在，但不在HTML源代码中。

有什么想法吗？也许对象中有某个属性可以告诉它是否来自源代码？

- Jonathan M

---

你无法判断。为什么你想要这样做？ - Pointy

谢谢关注。我有一些包含对象的变量，这些对象与一些DOM表格对象相匹配，除了隐含的tbody属性对象。我想知道tbody是隐式还是显式的，以便在变量中忽略/引用它。 - Jonathan M

Answer 1

也许可以将初始的 document.body.innerHTML 字符串保留在 document.body.onload 中。

然后，当你想要进行检查时，先测试一下它们是否仍然相同。
如果不同，比较两个字符串并找出差异。

我猜这样做应该没问题，除非页面太重了。

- Mic

---

那对于 TBODY 元素是行不通的，因为它们在 HTML 解析后立即添加。 - David

@David，第一次读取HTML时，TBODY已经存在。 - Mic

Answer 2

阅读您的评论，您只需要确定是否渲染过程中添加了<tbody>标记，而不是存在于源中？

如果是这样，为什么不通过应用属性<tbody class="exp">修改包含<tbody>的源代码，然后在遍历DOM时，您就知道任何不具有该属性的tbody节点都是由渲染引擎插入的。

- Alex K.

Answer 3

基于Alex的想法，有了一个新想法。仍然涉及重新获取整个DOM，但无法以其他方式实现。如果您的应用程序允许，可以在服务器端实现相同的逻辑。为了简洁起见，使用jQuery：

function getInsertedElements(callback){
    $.get('.', function(content){
        callback($(content
            .replace(/(<\w+[^>]+class\s*=\s*")/gi, '$1from-source ')
            .replace(/(<\w+)(?![^>]* class\s*=)/gi, '$1 class="from-source"')
        ).find(':not(.from-source)'));
    });
}

这将为您提供所有插入元素的列表 :) 可能需要一些细化，例如在引号匹配class="周围，因为引号在那里技术上是可选的。此外，尚未经过测试，但应该可以工作。

请注意，使用此方法返回的是新元素，而不是当前存在于DOM中的元素，因此如果这很重要，请注意此事项。

- user578895

---

这是一个好主意，但我不能问心无愧地给它点赞 ;) - Nilloc

抛弃了那个想法，我更喜欢这个 :) - user578895

有趣。我不太精通jQuery，但基本思路是这样的吗？1.获取原始源代码的副本。2.将所有类更改为“from-source”。3.浏览结果DOM并查找所有没有“from-source”类的对象。如果以上脚本正在执行此操作，我认为这将起作用。 - Jonathan M

@Jonathan - 注意，如果可能的话最好在服务器端处理。这显然不适用于所有应用程序，但您可以避免重新加载页面。 - user578895

@Jonathan - 另外，如果您需要添加闭合标签，例如 </li>，请参阅我的先前答案（单击编辑链接并查看我最初发布的内容）。 - user578895