Zugreifen auf HTML-DOM-Elemente von Javascript mit `.ChildNodes`

Ich wundere mich über die .childNodes Eigenschaft, ich habe den Code unten, und aus irgendeinem Grund bekomme ich 18 Kinder, während 6 sind HTMLInputElement s wie erwartet, und der Rest sind undefined. Um was geht es hierbei? Gibt es eine effiziente Möglichkeit, über die input Elemente zu iterieren?Zugreifen auf HTML-DOM-Elemente von Javascript mit `.ChildNodes`

<html> 
    <head> 
    <script> 
    window.onload = function(e){ 
     form = document.getElementById('myForm'); 
     alert(form.childNodes.length); 
     for(i=0; i<form.childNodes.length; i++){ 
      alert(form[i]); 
     } 
    } 
    </script> 
    </head> 
    <body> 
<form id='myForm' action="haha" method="post"> 
Name: <input type="text" id="fnameAdd" name="name" /><br /> 
Phone1: <input type="text" id="phone1Add" name="phone1" /><br /> 
Phone2: <input type="text" id="phone2Add" name="phone2" /><br /> 
E-Mail: <input type="text" id="emailAdd" name="email" /><br /> 
Address: <input type="text" id="addressAdd" name="address" /><br /> 
<input type="submit" value="Save" /> 
</body> 
</html>

Quelle

2012-04-10 Ramzi Kahil

Gehen Sie einfach auf www.jquery.com; Sie haben eine sehr gute Dokumentation. Alternativ, wenn Sie eine Schritt-für-Schritt-Anleitung möchten, google einfach "jQuery tutorial"; Es gibt viele da draußen. – machineghost

form.elements ist der schnelle Weg form.elements jedes Element eines form-

window.onload = function(e){ 
     var s='', form = document.getElementById('myForm'), 
     L=form.elements.length; 
     s=L+'\n'; 
     for(var i=0;i<L; i++){ 
      s+= (form[i].name || form[i].id)+'='+form[i].value+'\n'; 
     } 
     alert(s); 
    }

Quelle

2012-04-10 23:23:50 kennebec

childNodes gibt auch Textknoten zurück; Dies ist wahrscheinlich die Quelle Ihrer Verwirrung.

Um alle childNodes zu durchlaufen, aber achten Sie nur auf die INPUTs, überprüfen Sie einfach die TagName-Eigenschaft des Knotens. Wenn der Knoten ein Textknoten ist, hat er keinen tagName, und wenn der Knoten einen tagName hat, können Sie überprüfen, ob tagName == "input" ist.

Quelle

2012-04-10 23:19:00 machineghost

Oder, wie "bin nicht ich" vorgeschlagen, können Sie stattdessen .children verwenden, obwohl Sie .tagName immer noch überprüfen müssen, um nur die EINGABEN zu erhalten. Oder, wenn jemand kommentiert hat (nicht sicher, wer als Kommentar gelöscht wurde), könnten Sie * jQuery verwenden; Der jQuery-Ausdruck $ ("# myForm INPUT"). get() würde genau das zurückgeben, was Sie wollen. – machineghost

Irgendeine Idee, was ich verwenden könnte? –

Entschuldigung, Sie müssen spezifischer sein ... – machineghost

Textknoten, auch wenn sie nur aus Leerzeichen bestehen, werden ebenso in die Ausgabe einbezogen wie die br Elemente.

Verwenden Sie stattdessen .children, wenn Sie alle Elemente einschließlich br möchten. Dadurch erhalten Sie nur Elementknoten. Ich denke, ältere IE enthalten inkorrekt Kommentarknoten, aber Sie haben keine in Ihrem Code, also kein Problem.

Oder Sie tun ...

form.getElementsByTagName('input')

... vorausgesetzt, Sie wollten nur die input Elemente.

Und außerdem: Sie haben vergessen, Ihr form Element zu schließen.

Quelle

2012-04-10 23:20:12

Das gibt mir 11 Kinder (in Chrom und IE9) –

@Martin: Aktualisieren Sie Ihren Browser, um die neuesten Updates zu meiner Antwort zu sehen. –

Beachten Sie, dass "element.children" nicht von IE-Versionen älter als IE9 unterstützt wird. –

für den Zugriff auf alle Formularfelder zu bekommen, oder form.getElementsByTagName('INPUT')INPUT Elemente in Form zu erhalten.

Quelle

2012-04-10 23:24:58

Zugreifen auf HTML-DOM-Elemente von Javascript mit `.ChildNodes`

Antwort

Verwandte Themen