El uso de javascript, ¿cómo puedo saber si un objeto HTML en el DOM no está en el código fuente HTML?

Question

Estoy buscando ideas sobre cómo detectar objetos que se encuentran en el DOM de HTML, pero no están representados explícitamente en el código fuente HTML.

Como usted puede saber, si tengo el código fuente HTML que contiene los siguientes:

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

...el DOM de HTML agregará el <tbody> objeto en el árbol de objetos sin cambiar el código fuente, la comprensión de que el código fuente implica que.Así, en la DOM, la estructura es como si el código fuente HTML habían sido:

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

Tengo una función en javascript que está atravesando el árbol DOM, y la necesito para detectar cuando se ha ejecutado a través de un objeto que es implícita, es decir, es en el DOM, pero no en el código fuente HTML.

Alguna idea de cómo hacer esto?Tal vez hay algún atributo en el objeto que indica si se originó a partir de la fuente o no?

Answer 1

Nueva idea basada en una idea de Alex.Todavía implica la re-captura de la totalidad de la DOM, pero es imposible hacerlo de otra manera.Se puede aplicar esta misma lógica del lado del servidor si es viable en su aplicación.El uso de jQuery para mayor brevedad:

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

que le dará una lista de todos los elementos insertados :) Puede necesitar un poco de refinamiento , por ejemplo,alrededor de las cotizaciones de la coincidencia de class=" ya que una cita es técnicamente opcional allí.También de las naciones unidas probado, pero debería funcionar.

Tenga en cuenta que usted está consiguiendo nuevo elementos de la espalda con este método, no de los que actualmente existen en su DOM, por lo que si importa ser consciente de ello.

Answer 2

Al leer tu comentario sólo se necesita para determinar si un <tbody> la etiqueta ha sido añadido por el proceso de representación como opuesto a estar presentes en la fuente?

Si es así ¿por qué no modificar el código fuente que contiene <tbody> mediante la aplicación de un atributo <tbody class="exp">, como usted camina el DOM sabes que cualquier tbody nodo no posee ese atributo fue insertado por el motor de renderizado.

Answer 3

Se puede mantener en el document.body.onload la cadena de la inicial document.body.innerHTML

Entonces, cuando usted quiere hacer la verificación, prueba primero a ver si siguen siendo los mismos.
Si no comparar ambas cadenas y encontrar las diferencias.

Supongo que esto está bien, si usted no tiene una muy pesada la página.