Ist es normal, dass JavaScript ein ungültiges DOM erstellen kann?

Question

Etwas zufällig entdeckte ich, dass eine direkt in einem tbody eingefügte Spanne an Stelle bleibt, wenn sie mit JavaScript (insertBefore) ausgeführt wird, wobei ein solches ungültiges DOM mit literalem HTML dazu führen würde, dass die Spanne vor der gesamten Tabelle platziert wird.

Ich erwartete entweder das gleiche Verhalten wie mit Literal HTML oder einige DOM Exception geworfen wird.

z. dieses HTML

<table> 
    <thead><tr><th>Table Header</th></td></thead> 
    <tbody> 
     <span>from HTML &rarr; goes up</span> 
     <tr><td>Table Contents</td></tr> 
    </tbody> 
</table> 

mit diesem JavaScript:

var span = document.createElement('span'), 
    tbody = document.querySelector('tbody'); 
span.innerHTML = 'Created with JS → stays in place'; 
tbody.insertBefore(span, tbody.querySelector('tr')); 

macht "Erstellt mit JS → bleibt an seinem Platz" zwischen der Kopfzeile und der ersten Zeile; Die ursprüngliche, buchstäbliche Spanne bewegt sich außerhalb des Tisches.

Ist das normal, und kann/sollte ich darauf zählen? (Es verhält sich genauso in FF, Chrome, Opera, IE> = 9 (unten nicht getestet)).

Gibt es auch eine Möglichkeit, das DOM abzufragen, ob Inhalt eines bestimmten Typs (unter normalen Umständen) an einem bestimmten Punkt im DOM gültig sein würde? Das war genau das, was ich tun wollte, als ich von dieser Eigenart erfuhr (was es ist, imho).

Die Geige ist hier: http://jsfiddle.net/xr37g9kw/2/

Answer 1

Wie für "ist das normal, und kann/sollte ich darauf zählen?" Leider ja. Meist sollten Sie jedoch die Knotentypen kennen, mit denen Sie arbeiten. NB, im Fall von table, gibt es eine Handvoll von nicht so bekannten DOM-Methoden (HTMLTableElement.rows. InsertRow() usw.).

Wie für "gibt es eine Möglichkeit, das DOM abzufragen, ob Inhalt eines bestimmten Typs (unter normalen Umständen) an einem bestimmten Punkt im DOM gültig sein würde?" Nichts eingebaut für diesen genauen Zweck, aber Sie könnten ein natives Feature von JavaScript ausnutzen -> DOM API: Sie können den Browser HTML-Chunk im "wörtlichen Sinne" neu analysieren lassen. Ja, ich spreche über innerHTML.

In Ihrer Geige, das Hinzufügen ** ** tbody.outerHTML = tbody.outerHTML"fixes" the structure, so dass man hypothetisch einig DOM-Knoten nehmen könnte, Blick auf seinem DOM-Baum, Klon, "Re-eval" es und mit Original vergleichen.

Answer 2

Ja, das ist das Standardverhalten, wie Sie gesehen haben. Es ist kein gültiger HTML-Code, da Sie hier http://www.freeformatter.com/html-validator.html überprüfen können, wenn Sie den HTML-Code eingeben.