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>

我有一个遍历DOM树的javascript函数，我需要检测何时遇到隐含的对象，即它在DOM中，但不在HTML源代码中。

任何想法如何做到这一点？也许对象中有一些属性可以告诉它是否来自源？

Answer 1

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

如果是这样，为什么不通过应用属性<tbody>来修改包含<tbody class="exp">的源，那么当您遍历DOM时，您知道渲染引擎已插入任何不具有该属性的tbody节点

Answer 2

可以保留document.body.onload初始document.body.innerHTML

的字符串

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

如果你的页面太重，我想这没关系。

Answer 3

基于亚历克斯的想法的新想法。仍然需要重新获取整个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中当前存在的元素，因此如果重要的话请注意它。

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

3 个答案: