使用`.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元素

回答

相關問題