alex: childNodes aneinander reihen

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
  1. 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?
    
  2. 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
    
    1. 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?

      1. 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

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Oder möchtest du Kinder von Element 1 in Element 2 anhängen?

          Ja

          Sorry wenn meine Fragestellungen nicht leicht zu lesen sind.

          1. 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

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            1. 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
              
              1. 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?
                
                1. 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

                  --
                  Die NATO
                  ><o(((°>           ><o(((°>
                     <°)))o><                     ><o(((°>o
                  Der Valigator leibt diese Fische
                  1. 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

                    --
                    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                    1. 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

                      --
                      ><o(((°>           ><o(((°>
                         <°)))o><                     ><o(((°>o
                      Der Valigator leibt diese Fische
          2. Oder möchtest du Kinder von Element 1 in Element 2 anhängen?
            Ja

            Sorry 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

            1. 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?

              1. 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

                --
                RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                1. 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  
                  }
                  
                  1. 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

                    --
                    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                  2. 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

                    1. Danke, habs hinbekommen!

                      Vielen dank an euch beide, vor allem für eure Geduld!  :-)

      2. Ü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

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische