lindes10: Anzahl Childs unverständlich!!

Ich habe folgenden Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>Test</title>  
<script type="text/javascript">  
function anzahl_zeilen()  
{  
	  var zeilen_gesamt = document.getElementById('szenen').childNodes.length;  
	  document.getElementById("anz").value = zeilen_gesamt;  
}  
</script>  
</head>  
  
<body>  
<table id="test_table" summary="Test">  
<thead>  
	<tr>  
        <th>Var1</th>  
        <th>Var2</th>  
		<th>Var3</th>  
	</tr>  
</thead>  
<tfoot>  
</tfoot>  
<tbody id="szenen"><tr>  
    		<td>  
            	<select name='b1'>  
                	<option value="ja">ja</option>  
                	<option value="nein">nein</option>  
                </select>  
            </td>  
            <td>  
            	<input name='b1' type="text" value="" size="20" maxlength="50" />  
            </td>  
            <td>  
            	<input name='b2' type="text" value="" size="20" maxlength="50" />  
            </td>  
        </tr>  
        <tr>  
    		<td>  
            	<select name='c1'>  
                	<option value="ja">ja</option>  
                	<option value="nein">nein</option>  
                </select>  
            </td>  
            <td>  
            	<input name='c1' type="text" value="" size="20" maxlength="50" />  
            </td>  
            <td>  
            	<input name='c2' type="text" value="" size="20" maxlength="50" />  
            </td>  
        </tr>  
</tbody>  
</table>  
<input name="button" type="button" value="Anzahl Zeilen" onclick="anzahl_zeilen()" />  
<input id="anz" name="anz" type="text" value="" />  
</body>  
</html>  

Warum bekomme ich bei childNodes.length eine 4 zurück. Ich sehe in dem Code nur zwei Kinder. Kann mir das jmd erklären? Benutze Firefox als Browser. Hat das damit was zu tun??

Vielen Dank im voraus!

  1. Hi,

    Warum bekomme ich bei childNodes.length eine 4 zurück. Ich sehe in dem Code nur zwei Kinder.

    Du solltest die Augen öffnen - dann siehst Du auch die 2 Text-Knoten, die Zeilenumbruch und Einrückung jeweils nach dem </tr> und vor dem nächsten <tr> bzw. dem </tbody> enthalten.

    Kann mir das jmd erklären? Benutze Firefox als Browser. Hat das damit was zu tun??

    Nur insofern als daß IE zu blöd ist, diese Textknoten zu erkennen - der liefert fälschlicherweise nur 2 Childnodes.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    1. Hi!

      Warum bekomme ich bei childNodes.length eine 4 zurück. Ich sehe in dem Code nur zwei Kinder.
      Du solltest die Augen öffnen - dann siehst Du auch die 2 Text-Knoten, die Zeilenumbruch und Einrückung jeweils nach dem </tr> und vor dem nächsten <tr> bzw. dem </tbody> enthalten.

      Ergänzend: Diese Lösung bekommt man auch, indem man weiterforscht und über die childNodes iteriert. Sie haben eine Eigenschaft nodeType, mit der man erkennen kann, dass zwei davon die Text-Nodes sind.

      Ein gutes Werkzeug, um sich die Elemente in ihrem aktuellen Zustand anzusehen ist für den Firefox die Extension Firebug. (Rechtsklick auf das Element -> Element untersuchen -> auf der rechten Seite DOM wählen -> durch die Eigenschaften navigieren) Andere aktuelle Browser haben ebenfalls solche Werkzeuge, und sogar direkt eingebaut.

      Lo!

      1. Du solltest die Augen öffnen - dann siehst Du auch die 2 Text-Knoten, die Zeilenumbruch und Einrückung jeweils nach dem </tr> und vor dem nächsten <tr> bzw. dem </tbody> enthalten.

        Ergänzend: Diese Lösung bekommt man auch, indem man weiterforscht und über die childNodes iteriert. Sie haben eine Eigenschaft nodeType, mit der man erkennen kann, dass zwei davon die Text-Nodes sind.

        Das waren super Tipps! Hab den Code modifiziert und habe eine Lösung gefunden, die wohl in beiden Browsern funktionieren müsste...

        Vielen Dank!

          
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
        <html xmlns="http://www.w3.org/1999/xhtml">  
        <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Test</title>  
        <script type="text/javascript">  
        function anzahl_zeilen()  
        {  
        	  var zeilen_gesamt = document.getElementById('szenen').childNodes.length;  
        	  document.getElementById("anz").value = zeilen_gesamt;  
        	  var zeilen_tats = 0;  
        	  for (i=0;i<zeilen_gesamt;i++)  
        	  {  
        		  if (document.getElementById("szenen").childNodes[i].nodeType == 3)  
        		  {  
        			  zeilen_tats = zeilen_tats+1;  
        		  }  
        	  }  
        	  document.getElementById('anz_tats').value = zeilen_tats;  
        }  
        </script>  
        </head>  
          
        <body>  
        <table id="test_table" summary="Test">  
        <thead>  
        	<tr>  
                <th>Var1</th>  
                <th>Var2</th>  
        		<th>Var3</th>  
        	</tr>  
        </thead>  
        <tfoot>  
        </tfoot>  
        <tbody id="szenen"><tr>  
            		<td>  
                    	<select name='b1'>  
                        	<option value="ja">ja</option>  
                        	<option value="nein">nein</option>  
                        </select>  
                    </td>  
                    <td>  
                    	<input name='b1' type="text" value="" size="20" maxlength="50" />  
                    </td>  
                    <td>  
                    	<input name='b2' type="text" value="" size="20" maxlength="50" />  
                    </td>  
                </tr>  
                <tr>  
            		<td>  
                    	<select name='c1'>  
                        	<option value="ja">ja</option>  
                        	<option value="nein">nein</option>  
                        </select>  
                    </td>  
                    <td>  
                    	<input name='c1' type="text" value="" size="20" maxlength="50" />  
                    </td>  
                    <td>  
                    	<input name='c2' type="text" value="" size="20" maxlength="50" />  
                    </td>  
                </tr>  
        </tbody>  
        </table>  
        <input name="button" type="button" value="Anzahl Zeilen" onclick="anzahl_zeilen()" />  
        <label for="anz">Anzahl Kinder:</label>  
        <input id="anz" name="anz" type="text" value="" />  
        <label for="anz_tats">Anzahl Reihen:</label>  
        <input id="anz_tats" name="anz_tats" type="text" value="" />  
        </body>  
        </html>  
        
        
        1. function anzahl_zeilen()
          {
            var zeilen_gesamt = document.getElementById('szenen').childNodes.length;
            document.getElementById("anz").value = zeilen_gesamt;
            var zeilen_tats = 0;
            for (i=0;i<zeilen_gesamt;i++)
            {
            if (document.getElementById("szenen").childNodes[i].nodeType == 3)
            {
            zeilen_tats = zeilen_tats+1;
            }
            }
            document.getElementById('anz_tats').value = zeilen_tats;
          }

          Manche Browser kennen childElementCount aus Element Traversal. Mit einer Feature-Abfrage kann man die Sache in einem Eigenschaftszugriff lösen. Für die restlichen Browser wird weiterhin über childNodes iteriert

          function childElementCount (element) {  
             // Unterstützt der Browser schon childElementCount?  
             if ('childElementCount' in element) {  
                return element.childElementCount;  
             }  
            
             var childNodes = element.childNodes,  
                l = childNodes.length,  
                childElementCount = 0,  
                i;  
             for (i = 0; i < l; i++) {  
                if (childNodes[i].nodeType == 1) {  
                   childElementCount++;  
                }  
             }  
             return childElementCount;  
          }  
            
          var szenen = document.getElementById('szenen');  
          var zeilen = childElementCount(szenen);
          

          Noch einfacher geht es allerdings über die http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tbody@title=rows-Eigenschaft des tbody-Elements:

          var szenen = document.getElementById('szenen');  
          var zeilen = szenen.rows.length
          ~~~;  
            
          Das spart einem die ganze Arbeit.  
            
          Mathias