childNodes aneinander reihen
alex
- javascript
Hallo zusammen,
leider komm ich mit folgender Problemstellung nicht klar.
Ich speichere die Kindsknoten 2er Elemente in zwei verschiedenen Variablen
var finaltargets = first.childNodes;
var targets = second.childNodes;
Wie reihe ich jetzt die childNodes aus targets an die childNodes aus fineltargets an, so dass letztendlich alle childNodes in finaltargets stehen?
for(var j=0; j<targets.length;++j){
finaltargets.appendChild(targets[j]);
}
~~~funktioniert leider nicht.
Vielen Dank schon mal für Eure Hilfe.
liebe Grüße
Alex
Hi,
Ich speichere die Kindsknoten 2er Elemente in zwei verschiedenen Variablen
var finaltargets = first.childNodes;
var targets = second.childNodes;
Damit speicherst du dir lediglich eine Referenz auf die jeweilige NodeList.
> Wie reihe ich jetzt die childNodes aus targets an die childNodes aus fineltargets an, so dass letztendlich alle childNodes in finaltargets stehen?
Zu welchem Zweck?
Willst du die Kindknoten eines DOM-Elements in ein anderes einhängen?
> ~~~javascript
for(var j=0; j<targets.length;++j){
> finaltargets.appendChild(targets[j]);
> }
~~~funktioniert leider nicht.
Natürlich nicht, eine NodeList hat keine appendChild-Methode, schließlich ist sie kein HTML-Elementobjekt.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Ich speichere die Kindsknoten 2er Elemente in zwei verschiedenen Variablen
var finaltargets = first.childNodes;
var targets = second.childNodes;
>
> Wie reihe ich jetzt die childNodes aus targets an die childNodes aus fineltargets an, so dass letztendlich alle childNodes in finaltargets stehen?
>
> ~~~javascript
for(var j=0; j<targets.length;++j){
> finaltargets.appendChild(targets[j]);
> }
~~~funktioniert leider nicht.
Weil finaltargets eine Collection, sprich ein Array ist, und kein eigener Node.
Willst du wirklich die Arrays vereinigen? -> push() oder
oder mit splice <http://de.selfhtml.org/javascript/objekte/array.htm#splice>
Oder möchtest du Kinder von Element 1 in Element 2 anhängen?
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Danke für Deine Antwort.
Über document.write lasse ich mir die Variablen ausgeben und bekomme beidesmal ein "[object NodeList]".
Ich will daraus ein einziges "[object NodeList]" machen.
über finaltargets = finaltargets.push(target);
hat es leider nicht geklappt.
Unter welchem Stichwort läuft das?
Hi,
Über document.write lasse ich mir die Variablen ausgeben und bekomme beidesmal ein "[object NodeList]".
Ich will daraus ein einziges "[object NodeList]" machen.
NodeLists kannst du nicht „selber machen“.
Sie ergeben sich aus dem aktuellen Zustand des DOM.
über
finaltargets = finaltargets.push(target);
hat es leider nicht geklappt.
Nein, natürlich geht das so ebenfalls nicht.
NodeLists sind keine Arrays - sie teilen sich nur „zufällig“ ein paar Zugriffs-Methoden mit diesen.
Die Methode push besitzen sie aber nicht - natürlich nicht, siehe oben, NodeLists sind nicht zum „selber machen“.
Unter welchem Stichwort läuft das?
Unter dem Stichwort „bitte beschreibe uns endlich, was du eigentlich *erreichen* möchtest, dann können wir dir auch Wege vorschlagen, wie das sinnvoll umzusetzen ist.“
MfG ChrisB
Oder möchtest du Kinder von Element 1 in Element 2 anhängen?
Ja
Sorry wenn meine Fragestellungen nicht leicht zu lesen sind.
Hi,
Oder möchtest du Kinder von Element 1 in Element 2 anhängen?
Ja
Na dann nutze einfach eine Schleife - so lange es noch Kindelemente gibt, hänge sie mit appendChild ins andere Element um.
MfG ChrisB
Na dann nutze einfach eine Schleife - so lange es noch Kindelemente gibt, hänge sie mit appendChild ins andere Element um.
Sorry: Eine Nodelist ist kein Array! hast du natürlich recht.
Eine Frage:
Schau dir den Einfluss auf Whitespace in folgendem quick and dirty Script an:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body id="body">
<div id="a"><p>A1</p><p>A2</p><p>A3</p></div>
<div id="b"><p>B1</p> <p>B2</p> <p>B3</p></div>
<hr>
<script type="text/javascript">
[code lang=javascript]var a = document.getElementById('a').childNodes;
alert(a.length);
var b = document.getElementById('b').childNodes;
alert(b.length);
var n = document.createElement('div');
for(var i=0; i<a.length; i++){
alert(a[i]);
n.appendChild(a[i]);
}
for(var i=0; i<b.length; i++){
n.appendChild(b[i]);
alert(b[i]);
}
document.getElementsByTagName('body')[0].appendChild(n);
~~~</script>
</body>
</html>[/code]
Bei fehlendem Whitespace werden nicht alle Elemente erkannt (Fx).
Nur A1 und A3 werden umgehängt.
Warum?
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Hi,
<body id="body">
<div id="a"><p>A1</p><p>A2</p><p>A3</p></div>
<div id="b"><p>B1</p> <p>B2</p> <p>B3</p></div>
<hr>
<script type="text/javascript">
[code lang=javascript]var a = document.getElementById('a').childNodes;
alert(a.length);
var b = document.getElementById('b').childNodes;
alert(b.length);
var n = document.createElement('div');
for(var i=0; i<a.length; i++){
alert(a[i]);
n.appendChild(a[i]);
}
for(var i=0; i<b.length; i++){
n.appendChild(b[i]);
alert(b[i]);
}
document.getElementsByTagName('body')[0].appendChild(n);
>
> Bei fehlendem Whitespace werden nicht alle Elemente erkannt (Fx).
> Nur A1 und A3 werden umgehängt.
> Warum?
Weil NodeLists per Spezifikation „live“ sind, und immer den aktuellen Zustand des DOM abbilden.
Wenn du ein Element per appendChild umhängst und damit aus #a bzw. #b entfernst, ist es danach nicht mehr in deren childNodes-NodeList enthalten - mit deinen Schleifen überspringst du also Elemente.
Bei #b sind das zufälligerweise die Whitespace-Knoten - bei #a hingegen ist es das P-Element mit dem Inhalt A2.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Bei fehlendem Whitespace werden nicht alle Elemente erkannt (Fx).
Nur A1 und A3 werden umgehängt.
Warum?Weil NodeLists per Spezifikation „live“ sind, und immer den aktuellen Zustand des DOM abbilden.
Wenn du ein Element per appendChild umhängst und damit aus #a bzw. #b entfernst, ist es danach nicht mehr in deren childNodes-NodeList enthalten - mit deinen Schleifen überspringst du also Elemente.
Bei #b sind das zufälligerweise die Whitespace-Knoten - bei #a hingegen ist es das P-Element mit dem Inhalt A2.
OK, scheint logisch. Ich habe gesehen (bei dedlfix), dass mit einer while Schleife das Problem umgangen wird.
Meine kürzeste Fassung ohne eine zusätzliche Variable.
while( some_nodecollection[0] ){
some_other_domobject.appendChild( some_nodecollection[0] );
}
Denke ich hierbei wieder zu kurz, oder ist es besser auf:
var x;
while(x = some_nodecollection[0]){ ... }
zu prüfen?
Im letzten Fall prüfe ich den Wahrheitswert der Zuweisung.
Im ersten Fall prüfe ich, ob das Erste Element true ist.
Kann ein Node false sein?
mfg Beat
Hi,
Meine kürzeste Fassung ohne eine zusätzliche Variable.
while( some_nodecollection[0] ){
some_other_domobject.appendChild( some_nodecollection[0] );
}
> Denke ich hierbei wieder zu kurz, oder ist es besser auf:
>
> ~~~javascript
var x;
> while(x = some_nodecollection[0]){ ... }
>
zu prüfen?
Im letzten Fall prüfe ich den Wahrheitswert der Zuweisung.
Im ersten Fall prüfe ich, ob das Erste Element true ist.
Kommt letztendlich beides auf's gleiche raus.
Kann ein Node false sein?
Nein.
Aber eine NodeList kann ggf. gar keinen Knoten liefern, sondern null.
Wenn einfach nur alle Kindelemente eines Elementes umgehangen werden sollen, dann braucht man auch gar nicht childNodes bemühen und auf dessen erstes Element zugreifen, sondern kann gleich firstChild verwenden.
MfG ChrisB
Kann ein Node false sein?
Nein.
Aber eine NodeList kann ggf. gar keinen Knoten liefern, sondern null.
var a = document.getElementById('a').childNodes; // keine Kindknoten vorhanden
alert(a[0]); // ergibt undefined im FX
Ich möchte da aber nicht die Hand ins Feuer jeden Browsers legen.
mfg Beat
Oder möchtest du Kinder von Element 1 in Element 2 anhängen?
JaSorry wenn meine Fragestellungen nicht leicht zu lesen sind.
Dann durchlaufe die childNodes-Liste von elem1 und hänge jedes davon mittels http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild an elem2 an:
var elem1 = ...;
var elem2 = ...;
var children = elem1.childNodes, child;
while (child = children[0]) {
elem2.appendChild(child);
}
Diese while-Schleife holt sich solange den ersten Eintrag in der Kindknotenliste, bis elem1 keine Kindknoten mehr hat. Beim Anhängen an elem2 werden sie von elem1 ausgehängt und bei elem2 wieder eingehängt. (Sie werden nicht dupliziert, das ginge mit http://de.selfhtml.org/javascript/objekte/node.htm#clone_node@title=clone.)
Wenn man dem Element einen Knoten anhängen will, nimmt man appendChild. elem2.childNodes braucht dich nicht zu interessieren. Diese Knotenlisten sind nur für das Lesen gedacht! Es mag zwar intuitiv erscheinen, die Einträge der einen Kindknotenliste der anderen anzuhängen, aber so funktioniert das DOM nicht.
Mathias
TargetContainer.prototype.searchChildNodes=function(tc){
var targets = tc.childNodes;
var finaltargets = tc.childNodes;
for(var i=0; i<targets.length;++i){
var ofT = targets[i];
if (ofT.id != undefined && ofT.id != '') {
var element = document.getElementById(ofT.id);
if (element.hasChildNodes()) {
var targets2 = this.searchChildNodes(element);
while( targets2[0] ){
finaltargets.appendChild( targets2[0] );
}
}
}
}
}
Ohne die Whileschleife findet er alle Knoten und ich kann sie mir anzeigen lassen. Mit der Whileschleife gibt er nur die inneren Knoten aus.
Könnt ihr mir weiterhelfen?
Wie bekomme ich den Append hin?
Hi,
Könnt ihr mir weiterhelfen?
Wenn du uns nur unkommentierten Code ohne jegliche Erklärung, was der machen soll und auf welchen Elementen, hinwirfst - dann eher nein.
MfG ChrisB
Sorry!
TargetContainer.prototype.searchChildNodes=function(tc){ // var tc = document.getElementById("DivContainerId")
var targets = tc.childNodes; // ChildNodes eines Div-Containers
var finaltargets = tc.childNodes;
for(var i=0; i<targets.length;++i){ // Für alle childNodes im DIV Container
var ofT = targets[i]; // Einzeln Speichern in der Variable
if (ofT.id != undefined && ofT.id != '') { // Falls die ID nicht undefined oder leer ist
var element = document.getElementById(ofT.id); // wird die ID in Element gespeichert
if (element.hasChildNodes()) { // Falls diese ID weitere ChildNodes hat ...
var targets2 = this.searchChildNodes(element); // Wird die Funktion rekursiv aufgerufen
while( targets2[0] ){ // solange ChildNodes existieren
finaltargets.appendChild( targets2[0] ); // sollen sie an "finaltargets" angeheftet werden.
}
}
}
}
return finaltargets; // Ausgabe alle Knoten, Unterknoten, ... innerhalb eines DIV Containers
}
Hi,
var finaltargets = tc.childNodes;
finaltargets.appendChild( targets2[0] );
Dass du an eine NodeList keine Kindelemente anhängen kannst, wurde dir doch aber jetzt hier im Thread schon mehrfach gesagt.
MfG ChrisB
var finaltargets = tc.childNodes;
while( targets2[0] ){ // solange ChildNodes existieren finaltargets.appendChild( targets2[0] ); // sollen sie an "finaltargets" angeheftet werden.
Jetzt bitte noch einmal mein Posting lesen.
Ich habe es geschrieben, um dir exakt dieses Missverständnis noch einmal vor Augen zu führen.
Mathias
Danke, habs hinbekommen!
Vielen dank an euch beide, vor allem für eure Geduld! :-)
Über document.write lasse ich mir die Variablen ausgeben und bekomme beidesmal ein "[object NodeList]".
Ich will daraus ein einziges "[object NodeList]" machen.
über
finaltargets = finaltargets.push(target);
hat es leider nicht geklappt.
Gratulation: Sie haben "klappt nicht" angekreuzt und kostenlos einen iDiot erworben.
Du willst ja nicht die Referenz anhängen, sondern die einzelnen Arrayitems in dieser Collection.
mfg Beat
Grundlage für Zitat #1834.