(DOM) Styles bei eingefügten Nodes

[Olaf Schneider]

Hallo,

ich sitze an einer kleinen AJAX-Kennenlernapplikation und habe ein Problem mit Stylesheets unter Firefox 1.5.

folgendes Scenario:

Per XMLHttpRequest wird folgendes xml geholt

  
<?xml version="1.0" encoding="utf-8"?>  
<div><h2>title</h2><dl><dt>key</dt><dd>value</dd></dl></div>  

und wie folgt verarbeitet:

  
function doAction(xml) {  
 newNode = xml.cloneNode(true); // der neue Inhalt  
 container = document.getElementById('result'); // der Zielcontainer  
 while (child = container.firstChild) { // alte Inhalte löschen  
  container.removeChild(child);  
 }  
 result = newNode.getElementsByTagName('div')[0];  
  
 container.appendChild(result); // und neuen Inhalt einfügen  
}  

Tatsächlich wird der Code, wie im DOM Inspector zu sehen ist,wie gewünscht eingehängt, im Browser wird allerdings jedes Element als Inlineelement ohne die Browserdefaultstyles angezeigt.

Auffällig ist dabei, dass der DOM Inspector alle xhtml-Elementnamen gross-, die per DOM eingefügten aber kleinschreibt. Erste Tests haben allerdings keine Verhaltensänderungen gezeigt, wenn man die Elementnamen grossschreibt.

Wenn ich für die eingehängten Elemente individuelle Styleangaben mache, werden diese auch problemlos interpretiert.

Meine Frage ist: Warum werden die Browserdefaultstyles nicht auf die per DOM eingehängten Elemente angewendet?

Vielen Dank im voraus,
Olaf Schneider

[wahsaga]

hi,

Meine Frage ist: Warum werden die Browserdefaultstyles nicht auf die per DOM eingehängten Elemente angewendet?

Meine Vermutung:

Da du die Nodes direkt aus deinem XML-Dokument klonst, bleiben sie für den FF XML-Knoten - und werden nicht zu "richtigen" Knoten deines HTML-Dokumentes.
Also werden auch nicht die Default-Styles für HTML-Knoten auf sie angewendet.

Wie gesagt, nur meine erste Vermutung - muss nicht unbedingt stimmen.

Falls du vielleicht dein XML-Dokument rekursiv durchlaufen, und entsprechende HTML-Knoten wirklich erzeugen und einhängen willst, schau dir doch mal meinen kürzlich unternommenen Versuch, $E dazu umzuschreiben an:
http://forum.de.selfhtml.org/archiv/2006/4/t128475/

Und btw: Einfach den responseText des AJAX-Requests per .innerHTML irgendwo reinzuklatschen, gilt selbst unter Webstandards-Verfechtern nach Diskussionen der letzten Zeit nicht unbedingt als "evil".
Und schneller als das Erzeugen und Einhängen über's DOM ist es oftmals auch noch ...

gruß,
wahsaga

[wahsaga]

hi,

Meine Vermutung:

Da du die Nodes direkt aus deinem XML-Dokument klonst, bleiben sie für den FF XML-Knoten - und werden nicht zu "richtigen" Knoten deines HTML-Dokumentes.
Also werden auch nicht die Default-Styles für HTML-Knoten auf sie angewendet.

Wie gesagt, nur meine erste Vermutung - muss nicht unbedingt stimmen.

Vorschlag, um die Vermutung zu überprüfen:

Baue mal in den HTML-Dokument irgendwo
<div id="xmlFake"><div><h2>title</h2><dl><dt>key</dt><dd>value</dd></dl></div></div>
ein - das wäre ja quasi der Inhalt deines XML-Dokumentes in HTML notiert und in einen weiteren Container mit der ID xmlFake verpackt.

Und dann ersetze den Anfang deiner Funktion wie folgt:

function doAction(xml) {  
 //diese Erzeugung des neuen Knotens auskommentiert:  
 //newNode = xml.cloneNode(true); // der neue Inhalt  
  
 //stattdessen den Node aus dem im HTML-Dokument bereits vorhandenen Code klonen:  
 newNode = document.getElementById("xmlFake").cloneNode(true);  
  
 // ... der restliche Code deiner Funktion  
}

Damit müsstest du ja jetzt in newNode eine Knotenstruktur vorliegen haben, die der vorher aus dem XML-Dokument geklonten entspricht - funktioniert es dann, wenn du deren erstes Kind-Div wie bisher ins Dokument einzuhängen versuchst?

gruß,
wahsaga

[molily]

Hallo,

Tatsächlich wird der Code, wie im DOM Inspector zu sehen ist,wie gewünscht eingehängt, im Browser wird allerdings jedes Element als Inlineelement ohne die Browserdefaultstyles angezeigt.

Auffällig ist dabei, dass der DOM Inspector alle xhtml-Elementnamen gross-, die per DOM eingefügten aber kleinschreibt. Erste Tests haben allerdings keine Verhaltensänderungen gezeigt, wenn man die Elementnamen grossschreibt.

Das war zu erwarten, denn die Elemente stammen aus einem unbekannten Namespace. Nur weil sie die Namen tragen von Elementen, die es auch im XHTML-Namespace gibt, interpretiert sie Firefox noch längst nicht automatisch als XHTML-Elemente.

<?xml version="1.0" encoding="utf-8"?>
<div><h2>title</h2><dl><dt>key</dt><dd>value</dd></dl></div>

  
Schreibe mal xmlns="http://www.w3.org/1999/xhtml" in das div, dann sollte es klappen. Woher soll Firefox sonst wissen, dass dieser XML-Code XHTML ist?  
  
Mathias

-- 
[Visitenkarte](http://community.de.selfhtml.org/visitenkarten/view.php?key=17) · [SELFHTML Weblog](http://aktuell.de.selfhtml.org/weblog/)

[Olaf Schneider]

Hallo Mathias,

Schreibe mal xmlns="http://www.w3.org/1999/xhtml" in das div, dann sollte es klappen. Woher soll Firefox sonst wissen, dass dieser XML-Code XHTML ist?

Danke, das war der richtige Tipp. Namespaces hatte ich komplett vergessen. Dann gilt also eine eigene Stylesheetangabe foo {bar: 0} für foo-Knoten aus allen Namespaces, die Browserdefaultstyles jedoch nur für foo-Knoten aus dem xhtml-Namensraum.

Wieder was gelernt.

Gruß
Olaf

P.S.: Danke auch an Dich, wahsaga. Deinen Ansatz habe ich allerdings, nachdem die Namespaceangabe das Problem gelöst hat, nicht weiter verfolgt.