Usando javascript, como posso saber se um objeto HTML no DOM não está no código-fonte HTML?

Question

Estou procurando ideias sobre como detectar objetos que estão no HTML DOM, mas não estão representados explicitamente na fonte HTML.

Como você deve saber, se eu tiver uma fonte HTML que contenha o seguinte:

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

...o HTML DOM adicionará o <tbody> objeto na árvore de objetos sem alterar o código-fonte, entendendo que o código-fonte o implica.Portanto, no DOM, a estrutura é como se a fonte HTML tivesse sido:

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

Tenho uma função javascript que está passando pela árvore do DOM, e preciso detectar quando me deparei com um objeto que está implícito, ou seja, está no DOM, mas não no fonte HTML.

Alguma idéia de como fazer isso?Talvez haja algum atributo no objeto que diga se ele se originou na fonte ou não?

Answer 1

Nova ideia baseada na ideia de Alex.Ainda envolve buscar novamente todo o DOM, mas é impossível fazer de outra forma.Você poderia implementar essa mesma lógica no lado do servidor, se for viável em seu aplicativo.Usando jQuery por questões de brevidade:

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)'));
    });
}

isso lhe dará uma lista de todos os elementos inseridos :) Pode precisar de algum refinamento, por exemplo.em torno das aspas correspondentes class=" já que uma cotação é tecnicamente opcional.Também não testado, mas deve funcionar.

Observe que você está recebendo novo elementos de volta com este método, não aqueles que existem atualmente em seu DOM, então, se isso for importante, esteja ciente disso.

Answer 2

Lendo seu comentário, você só precisa determinar se um <tbody> tag foi adicionada pelo processo de renderização em vez de estar presente na fonte?

Se sim, por que não modificar a fonte que contém <tbody> aplicando um atributo <tbody class="exp">, então, ao percorrer o DOM, você saberá que qualquer nó tbody que não possua esse atributo foi inserido pelo mecanismo de renderização.

Answer 3

Pode ser mantido no document.body.onload a string da inicial document.body.innerHTML

Aí quando quiser fazer a verificação, teste primeiro para ver se ainda são iguais.
Caso contrário, compare as duas strings e encontre as diferenças.

Acho que está tudo bem, se você não tiver uma página muito pesada.