Czy to normalne, że JavaScript może stworzyć nieprawidłowy DOM?

Question

Nieco przypadkiem odkryłem, że przęsło wstawione bezpośrednio wewnątrz tsinu pozostaje na swoim miejscu, gdy zostanie zrobione za pomocą JavaScript (insertBefore), gdzie taki niepoprawny DOM mógłby zostać utworzony z dosłownym prowadzeniem HTML do przęsła umieszczonego przed całą tabelą.

Spodziewałem się zachowania podobnego do literalnego HTML lub wyrzucania wyjątku DOM.

E.g. to 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> 

z tej JavaScript:

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

renderuje "Utworzony z JS → pozostaje na swoim miejscu" pomiędzy nagłówkiem a pierwszym rzędzie; oryginalny, dosłowny, zakres porusza się poza stołem.

Czy to normalne i czy mogę/powinienem na to liczyć? (Zachowuje się tak samo w FF, Chrome, Opera, IE> = 9 (nie testowane poniżej)).

Ponadto istnieje sposób na zapytanie do DOM, czy zawartość określonego typu (w normalnych warunkach) byłaby ważna w określonym punkcie DOM? Właśnie to chciałem zrobić, gdy dowiedziałem się o tym dziwactwie (którym jest, imho).

skrzypcach jest tutaj: http://jsfiddle.net/xr37g9kw/2/

Answer 1

Jeśli chodzi o "jest to normalne i czy mogę/powinienem na to liczyć?" Niestety, tak. Ale przede wszystkim powinieneś zdawać sobie sprawę z typów węzłów, z którymi pracujesz. NB, w przypadku table, istnieje garstka niezbyt dobrze znanych metod DOM (HTMLTableElement.rows. InsertRow() i tak dalej).

Jeśli chodzi o "czy istnieje sposób na zapytanie do DOM, czy zawartość określonego typu (w normalnych warunkach) byłaby ważna w określonym punkcie DOM?" nic nie jest wbudowane w tym celu, ale możesz wykorzystać jedną natywną cechę JavaScript -> DOM API: możesz pozwolić przeglądarce na ponowne przeanalizowanie fragmentu HTML w "dosłowny sposób". Tak, mówię o innerHTML.

W swoim skrzypcach, dodając ** tbody.outerHTML = tbody.outerHTML ** "fixes" the structure, możesz hipotetycznie wziąć jakiś węzeł DOM, spójrz na jego drzewo DOM, sklonuj, "przeprowadź ponownie" i porównaj z oryginałem.

Answer 2

Tak, to domyślne zachowanie, jak widzieliście. Oczywiście nie jest to poprawny kod HTML, ponieważ możesz sprawdzić tutaj kod: http://www.freeformatter.com/html-validator.html.