使用`.childNodes`从javascript访问HTML DOM元素

我想知道.childNodes属性，我有下面的代码，由于某种原因，我得到18个孩子，而6个是HTMLInputElement s如预期的，其余的是undefined。这是关于什么的？有没有一种有效的方法来遍历input元素？使用`.childNodes`从javascript访问HTML DOM元素

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

来源

2012-04-10 Ramzi Kahil

只需访问www.jquery.com;他们有很好的文档。另外，如果你想要一步一步的教程只是谷歌“jQuery教程”;那里有很多东西。 – machineghost 2012-04-10 23:24:57

form.elements是访问形状配合

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); 
    }

来源

2012-04-10 23:23:50 kennebec

childNodes也返回文本节点;这可能是你混乱的根源。

要遍历所有childNodes，但只关注INPUT，只需检查节点的tagName属性即可。如果节点是文本节点，它将不会有tagName，并且如果节点确实有tagName，则可以检查tagName ==“input”。

来源

2012-04-10 23:19:00 machineghost

或者，作为“我不是”建议，您可以改用.children，尽管您仍然需要检查.tagName才能获得INPUT。或者，如有人评论（不确定谁作为评论被删除），你*可以*使用jQuery; jQuery表达式$（“＃myForm INPUT”）。get（）会返回你想要的。 – machineghost 2012-04-10 23:22:55

任何想法我可以使用？ – 2012-04-10 23:26:16

对不起，您需要更具体地... – machineghost 2012-04-10 23:38:36

文本节点（即使它们仅包含空格）也将包含在输出中，br元素也包含在内。

使用.children而不是你想要的所有元素，包括br。这只会给你元素节点。我认为旧的IE不正确地包含评论节点，但是你的代码中没有任何内容，所以没有问题。

或者你可以做...

form.getElementsByTagName('input')

...假设你只想要input元素。

除此之外：你忘了关闭你的form元素。

来源

2012-04-10 23:20:12

这给了我11个孩子（在铬和IE9） – 2012-04-10 23:25:51

@Martin：刷新您的浏览器以查看我的答案的最新更新。 – 2012-04-10 23:26:41

请注意，IE8之前的IE版本不支持'element.children'。 – 2012-04-10 23:28:23

使用form.elements的每一个元素来获取所有表单域，或form.getElementsByTagName('INPUT')得到表单内INPUT元素的快捷方式。

来源

2012-04-10 23:24:58

使用`.childNodes`从javascript访问HTML DOM元素

回答

相关问题