Klonen eines DOM-Objektes mit cloneNode

[Andreas]

Hallo ich hab ein Problem. Wenn ich mir mittels DOM ein Auswahlfeld erzeuge vorin gewissen Optionen vorselktiert sind und ich dann dieses Objekt mit der Funktion cloneNode klone, übernimmt er nicht die vorselektierten Optionen mit in das geklonte DOM-Objekt. Hat jemand vo euch jemand eine Idee warum cloneNode hier anscheinend nicht richtig arbeitet? Achso das Problem tritt im Firefox wie auhc im IE auf.

anbei sende ich noch einen kleinen BeispielCode

danke im Vorraus

var select = document.createElement('select');
select.size = 3;
select.multiple = true;
select.name = 'derName';

var option1 = document.createElement('option');
var owert1 = document.createTextNode('1');
option1.appendChild(owert1);
option1.value = 'eins';
option1.id = 'bla';
select.appendChild(option1);

var option2 = document.createElement('option');
var owert2 = document.createTextNode('2');
option2.appendChild(owert2);
option2.value = 'zwei';
option2.selected = true;
option2.id = 'bla';
select.appendChild(option2);

var option3 = document.createElement('option');
var owert3 = document.createTextNode('3');
option3.appendChild(owert3);
option3.value = 'drei';
option3.id = 'bla';
option3.selected = true;
select.appendChild(option3);

selectClone = select.cloneNode(true);

wenn man nun select und selectClone im Browser darstellt sind in select zwei Felder vorselektiert und in selectClone nicht.

[Cheatah]

Hi,

Hallo ich hab ein Problem. Wenn ich mir mittels DOM ein Auswahlfeld erzeuge vorin gewissen Optionen vorselktiert sind und ich dann dieses Objekt mit der Funktion cloneNode klone, übernimmt er nicht die vorselektierten Optionen mit in das geklonte DOM-Objekt.

richtig. Der Unterschied liegt darin, dass die DOM-Node geklont wird, nicht das JavaScript-Objekt.

Hat jemand vo euch jemand eine Idee warum cloneNode hier anscheinend nicht richtig arbeitet?

DOM-Nodes sind beispielsweise Elemente oder Attribute. Schaut man sich das HTMLOptionElement an, so erkennt man:

"selected of type boolean
Represents the current state of the corresponding form control, in an interactive user agent. Changing this attribute changes the state of the form control, but does not change the value of the HTML selected attribute of the element."

Beim Klonen wird das unveränderte HTML-Attribut "selected" übernommen, nicht die gleichnamige JavaScript-Eigenschaft.

option1.id = 'bla';
option2.id = 'bla';
option3.id = 'bla';

*hüstel* Dies ist hoffentlich nur beispielhaft. Vor dem Einhängen des Klons in das Dokument, in dem sich das Original befindet, musst Du die IDs überdies verändern.

Cheatah

[Andreas]

Ja das mit den Ids war nur Beispielhaft :)

Was für Möglichkeiten hab ich denn nun das selected-Attribut zu setzen? setAttribute() funktioniert wieder im IE6 nicht *grummel*

[Struppi]

Was für Möglichkeiten hab ich denn nun das selected-Attribut zu setzen? setAttribute() funktioniert wieder im IE6 nicht *grummel*

brauchst du ja auch nicht, du kannst problems [dein_select_objekt].selected = true setzen.

Struppi.

[Andreas]

Was für Möglichkeiten hab ich denn nun das selected-Attribut zu setzen? setAttribute() funktioniert wieder im IE6 nicht *grummel*

brauchst du ja auch nicht, du kannst problems [dein_select_objekt].selected = true setzen.

Struppi.

ohne Wort! nagut ein paar: Struppi bitte erst alles durchlesen :)

[Struppi]

ohne Wort! nagut ein paar: Struppi bitte erst alles durchlesen :)

Wieso?
Das war die Antwort auf deine Frage oder steckte da etwas drin was du uns nicht erzählt hast?

Struppi.

[Siechfred]

ohne Wort! nagut ein paar: Struppi bitte erst alles durchlesen :)
Das war die Antwort auf deine Frage oder steckte da etwas drin was du uns nicht erzählt hast?

Nein, Andreas will einen Attributknoten ins DOM einhängen, damit er ihn mitklonen kann. Und das ist soweit ich weiß im Internet Explorer nur via innerHTML lösbar.

Siechfred

[Struppi]

ohne Wort! nagut ein paar: Struppi bitte erst alles durchlesen :)
Das war die Antwort auf deine Frage oder steckte da etwas drin was du uns nicht erzählt hast?

Nein, Andreas will einen Attributknoten ins DOM einhängen, damit er ihn mitklonen kann. Und das ist soweit ich weiß im Internet Explorer nur via innerHTML lösbar.

Hat Cheatah ihm nicht gesagt, das selected eben nicht mitgeklont wird?
Er muss die Eigenschaft genau wie im Orginal entsprechen setzen.

Struppi.

[Siechfred]

Nein, Andreas will einen Attributknoten ins DOM einhängen, damit er ihn mitklonen kann. Und das ist soweit ich weiß im Internet Explorer nur via innerHTML lösbar.
Hat Cheatah ihm nicht gesagt, das selected eben nicht mitgeklont wird?
Er muss die Eigenschaft genau wie im Orginal entsprechen setzen.

Nein. Wenn du die Eigenschaft selected via setAttribute definierst, wird sie in Browsern, die das beherrschen (hier Firefox) Bestandteil des DOM und somit bei cloneNode mitkopiert, anders als beim direkten Ändern der Objekteigenschaft 'selected'.

Siechfred

[Cheatah]

Hi,

Nein. Wenn du die Eigenschaft selected via setAttribute definierst, wird sie in Browsern, die das beherrschen (hier Firefox) Bestandteil des DOM und somit bei cloneNode mitkopiert, anders als beim direkten Ändern der Objekteigenschaft 'selected'.

genau. Und in Folge dessen kann man, wie Struppi sagte, anschließend die selected-Eigenschaften im geklonten Baum abhängig von ihren Entsprechungen im Original setzen. Das sollte nicht allzu schwer sein, wenn man bedenkt, dass die beiden Bäume frappierende Ähnlichkeiten aufweisen ;-)

Cheatah

[Siechfred]

Nein. Wenn du die Eigenschaft selected via setAttribute definierst, wird sie in Browsern, die das beherrschen (hier Firefox) Bestandteil des DOM und somit bei cloneNode mitkopiert, anders als beim direkten Ändern der Objekteigenschaft 'selected'.
genau. Und in Folge dessen kann man, wie Struppi sagte, anschließend die selected-Eigenschaften im geklonten Baum abhängig von ihren Entsprechungen im Original setzen. Das sollte nicht allzu schwer sein, wenn man bedenkt, dass die beiden Bäume frappierende Ähnlichkeiten aufweisen ;-)

Hast ja Recht, ich wollte nur auf den Unterschied zwischen Objekteigenschaft und setAttribute raus. Allerdings hat sich mir noch nicht erschlossen, die Manipulation welcher Objekteigenschaften welche Änderungen am DOM nach sich zieht, denn laut DOM-Inspector führt eine Wertzuweisung zu [HTMLOptionElement].id zu einem klonfähigen id-Attribut, ebenso wie [HTMLOptionElement].value zu einem klonfähigen value-Attribut wird. Warum dann nicht auch [HTMLOptionElement].selected?

Siechfred

[Cheatah]

Hi,

Hast ja Recht, ich wollte nur auf den Unterschied zwischen Objekteigenschaft und setAttribute raus.

okay, das ist betonenswert :-)

Allerdings hat sich mir noch nicht erschlossen, die Manipulation welcher Objekteigenschaften welche Änderungen am DOM nach sich zieht, denn laut DOM-Inspector führt eine Wertzuweisung zu [HTMLOptionElement].id zu einem klonfähigen id-Attribut, ebenso wie [HTMLOptionElement].value zu einem klonfähigen value-Attribut wird. Warum dann nicht auch [HTMLOptionElement].selected?

Weil .id und .value gewissermaßen 1:1-Repräsentationen der gleichnamigen Attribute sind, .selected jedoch nicht. Die Zuweisung des Boole'schen Wertes 'true' führt zum Attribut selected="selected", die des Wertes 'false' zum Entfernen des Attributs. Wären selected="true" und selected="false" gültig (und würde letzteres dazu führen, dass das Feld auch tatsächlich nicht selektiert ist), wäre der Fall vermutlich anders gelagert.

Cheatah

[Struppi]

Weil ...

und wieder was gelernt, danke.

Struppi.

[Andreas]

hmm aba innerHtml kann ich wiederum in meinen Kontext nicht benutzen. Hab jetzt mein Problem vorerst dadurch geloest das ich mit eine eigenen Clonefunktion geschrieben hat die das normal cloneNode benutzt nur halt noch die Sonderfaelle abgrasst.

Trotzdem danke an alle!

[Struppi]

hmm aba innerHtml kann ich wiederum in meinen Kontext nicht benutzen. Hab jetzt mein Problem vorerst dadurch geloest das ich mit eine eigenen Clonefunktion geschrieben hat die das normal cloneNode benutzt nur halt noch die Sonderfaelle abgrasst.

Jo, anders geht's vermutlich auch ncht.

Struppi.