Wie kann ich mithilfe von Javascript feststellen, ob ein HTML-Objekt im DOM nicht im HTML-Quellcode enthalten ist?

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

  •  15-11-2019
  •  | 
  •  

Frage

Ich suche nach Ideen zum Erkennen von Objekten, die sich im HTML-DOM befinden, aber nicht explizit in der HTML-Quelle dargestellt werden.

Wie Sie vielleicht wissen, wenn ich eine HTML-Quelle habe, die Folgendes enthält:

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

...das HTML-DOM fügt das hinzu <tbody> objekt im Objektbaum, ohne den Quellcode zu ändern, wobei zu verstehen ist, dass der Quellcode dies impliziert.Im DOM ist die Struktur also so, als ob die HTML-Quelle gewesen wäre:

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

Ich habe eine Javascript-Funktion, die den DOM-Baum durchläuft, und ich muss erkennen, wann ich auf ein Objekt gestoßen bin, das impliziert ist, dh es befindet sich im DOM, aber nicht in der HTML-Quelle.

Irgendwelche Ideen, wie das geht?Vielleicht enthält das Objekt ein Attribut, das angibt, ob es von der Quelle stammt oder nicht?

War es hilfreich?

Lösung

Neue Idee basierend auf Alex Idee.Beinhaltet immer noch das erneute Abrufen des gesamten DOM, aber es ist unmöglich, etwas anderes zu tun.Sie könnten dieselbe Logik serverseitig implementieren, wenn dies in Ihrer App möglich ist.Verwenden von jQuery der Kürze halber:

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

das gibt Ihnen eine Liste aller eingefügten Elemente :) Möglicherweise müssen Sie etwas verfeinern, z. B.rund um die Zitate passend class=" da ein Angebot dort technisch optional ist.Auch ungeprüft, sollte aber funktionieren.

Beachten Sie, dass Sie bekommen neu elemente mit dieser Methode zurück, nicht die, die derzeit in Ihrem DOM existieren, also wenn das wichtig ist, seien Sie sich dessen bewusst.

Andere Tipps

Wenn Sie Ihren Kommentar lesen, müssen Sie nur feststellen, ob a <tbody> tag wurde durch den Renderprozess hinzugefügt, anstatt in der Quelle vorhanden zu sein?

Wenn ja, warum nicht die Quelle ändern, die enthält <tbody> durch Anwenden eines Attributs <tbody class="exp">, wenn Sie dann durch das DOM gehen, wissen Sie, dass jeder tbody-Knoten, der dieses Attribut nicht besitzt, von der Rendering-Engine eingefügt wurde.

Kann bei der behalten werden document.body.onload die Zeichenfolge der Initiale document.body.innerHTML

Wenn Sie dann die Überprüfung durchführen möchten, testen Sie zuerst, ob sie noch gleich sind.
Wenn nicht, vergleichen Sie beide Zeichenfolgen und finden Sie die Unterschiede.

Ich denke, das ist in Ordnung, wenn Sie keine zu schwere Seite haben.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top