爲什麼這個childNodes會給我這種奇怪的輸出？

Question

爲什麼當我登錄特定節點列表中的所有節點的tagName時，它會給我這個重複的undefined反饋？

這是即時從提取的節點代碼的一部分：

的index.html

<form name="contactForm" id="contactForm"> 
    <div id="textInfo"> 
     <ul>  
      <li>    
       <label for="firstName" class="mainLabel">First Name : </label> 
       <input type="text" name="firstName" id="firstName"/> 
       <span>This must be filled</span> 
      </li>  
      <li>  
       <label for="lastName" class="mainLabel">Last Name : </label> 
       <input type="text" name="lastName" id="lastName"></input> 
       <span>This must be filled</span> 
      </li>  
      <li>  
       <label for="email" class="mainLabel">E-mail : </label> 
       <input type="email" name="email" id="email"></input> 
       <span>This must be filled</span> 
      </li>        
     </ul> 
    </div>​ 

的script.js

var myForm = document.forms["contactForm"]; 
eventUtil.add(myForm, "submit" , function(evt){ 
     var firstName = myForm.elements["firstName"]; 

     if(firstName.value == ""){  
      for(i=0; i < firstName.parentNode.childNodes.length ; i++){ 
       console.log("childNodes[" + i + "]: " + firstName.parentNode.childNodes[i].tagName); 
      } 
      eventUtil.preventDefault(evt); 
     } 
    }); 

和輸出是：

childNodes[0]: undefined 
childNodes[1]: LABEL 
childNodes[2]: undefined 
childNodes[3]: INPUT 
childNodes[4]: undefined 
childNodes[5]: SPAN 
childNodes[6]: undefined 

爲什麼重複輸出undefined？

Answer 1

for(i=0; i < firstName.parentNode.childNodes.length ; i++){ 
    var currNode=firstName.parentNode.childNodes[i]; 
    if(currNode.nodeType==1){ 
     console.log("childNodes[" + i + "]: " + currNode.tagName); 
    }     
} 

你可以檢查nodeType（Node.ELEMENT_NODE == 1）來選擇Element only。