En utilisant javascript, comment puis-je savoir si un objet HTML dans le DOM n'est pas dans le code source HTML ?

StackOverflow https://stackoverflow.com/questions/6047064

  •  15-11-2019
  •  | 
  •  

Question

Je recherche des idées sur la façon de détecter les objets qui se trouvent dans le DOM HTML, mais ils ne sont pas représentés explicitement dans la source HTML.

Comme vous le savez peut-être, si j'ai une source HTML contenant les éléments suivants :

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

...le DOM HTML ajoutera le <tbody> objet dans l'arborescence des objets sans changer le code source, sachant que le code source l'implique.Ainsi dans le DOM, la structure est comme si la source HTML avait été :

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

J'ai une fonction javascript qui parcourt l'arborescence DOM et je dois détecter quand j'ai rencontré un objet implicite, c'est-à-dire qu'il se trouve dans le DOM, mais pas dans la source HTML.

Des idees pour faire cela?Peut-être y a-t-il un attribut dans l'objet qui indique s'il provient de la source ou non ?

Était-ce utile?

La solution

Nouvelle idée basée sur l'idée d'Alex.Cela implique toujours de récupérer l'intégralité du DOM, mais il est impossible de faire autrement.Vous pouvez implémenter cette même logique côté serveur si cela est réalisable dans votre application.Utiliser jQuery par souci de concision :

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

cela vous donnera une liste de tous les éléments insérés :) Peut nécessiter un peu de raffinement, par ex.autour des guillemets correspondant class=" puisqu’un devis y est techniquement facultatif.Non testé non plus, mais devrait fonctionner.

Notez que vous obtenez nouveau éléments avec cette méthode, pas ceux qui existent actuellement dans votre DOM, donc si cela est important, soyez-en conscient.

Autres conseils

En lisant votre commentaire, il vous suffit de déterminer si un <tbody> La balise a été ajoutée par le processus de rendu au lieu d'être présente dans la source ?

Si oui, pourquoi ne pas modifier la source qui contient <tbody> en appliquant un attribut <tbody class="exp">, alors que vous parcourez le DOM, vous savez que tout nœud corporel ne possédant pas cet attribut a été inséré par le moteur de rendu.

Peut être conservé au document.body.onload la chaîne de l'initiale document.body.innerHTML

Ensuite, lorsque vous souhaitez effectuer la vérification, testez d'abord pour voir s'ils sont toujours les mêmes.
Sinon, comparez les deux chaînes et trouvez les différences.

Je suppose que ça va, si vous n'avez pas une page trop lourde.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top