爲什麼我的JavaScript DOM遍歷不起作用？

我在表單上有兩個複選框。當有人檢查第二個盒子時，我的JavaScript會檢查以確保第一個盒子被選中。如果第一個框沒有被選中，那麼我的JavaScript會檢查它。但是，由於某種原因，我的DOM遍歷不能像它應該那樣工作，並且第一個盒子沒有被檢查;相反，我得到了第10行的「TypeError：firstCheckbox爲null」（「if」語句）。爲什麼這不起作用？爲什麼我的JavaScript DOM遍歷不起作用？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title></title> 
     <script type="text/javascript"> 
      function setMe(secondCheckbox){ 
       // alert(secondCheckbox.parentNode.previousSibling.nodeName); 
       var firstCheckbox = secondCheckbox.parentNode.previousSibling.lastChild; 
       if(secondCheckbox.checked && !firstCheckbox.checked){ 
        firstCheckbox.checked = true; 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <div> 
      <form> 
       <table border="1" cellspacing="4" cellpadding="4"> 
        <thead> 
         <tr> 
          <th> 
           <label for="input01">input01</label><br> 
           <input type="text" id="input01" name="input01"> 
          </th> 
          <th> 
           <label for="input02">input02</label><br> 
           <input type="text" id="input02" name="input02"> 
          </th> 
          <th> 
           <label for="input03">input03</label><br> 
           <input type="checkbox" id="input03" name="input04"> 
          </th> 
          <th> 
           <label for="input04">input04</label><br> 
           <input type="checkbox" id="input04" name="input04" onChange="setMe(this);"> 
          </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td colspan="2"> 
           <button type="submit">submit</button> 
          </td> 
          <td colspan="2"> 
           <button type="reset">reset</button> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </form> 
     </div> 
    </body> 
</html>

來源

2014-09-04 Brian

您可能會在文檔中的元素，而不是中選擇「空白」。請參閱：https：//developer.mozilla.org/en-US/docs/Web/API/Node.previousSibling – 2014-09-04 19:43:40

您的所有標籤都指向相同的輸入。 – Sebastien 2014-09-04 19:44:58

@Sebastien修正了這一點，謝謝。 – Brian 2014-09-04 19:46:33

總之，previousSibling並不意味着previousSiblingElement而是指previousSiblingNode，同樣所以lastChild。

您需要更改代碼以避免基於html文件格式自動添加的文本節點。

樣本遍歷你會（我沒有測試/調試這一點，只是在編輯器中鍵入這裏）：

var prev = secondCheckbox.parentNode.previousSibling; 
while (prev.nodeType !== Node.ELEMENT_NODE) { 
    prev = prev.previousSibling; 
} 
// prev now points to the previousElementSibling 
var lastChild = prev.lastChild; 
while (lastChild.nodeType !== Node.ELEMENT_NODE) { 
    lastChild = lastChild.previousSibling; 
} 

// lastChild should have the element you're looking for

來源

2014-09-04 19:43:55 Mutahhir

任何建議...不涉及直接解決它的ID？ – Brian 2014-09-04 19:48:54

你仍然可以遍歷DOM，但是繼續在previousSibling上循環，直到'previousSibling.nodeType === ELEMENT_NODE'，然後選擇lastChild並用'previousSibling.nodeType === ELEMENT_NODE'再次循環 – Mutahhir 2014-09-04 19:51:51

這樣，第1步會給你先前*元素*，然後第2步將給出該元素的最後一個*元素*孩子 – Mutahhir 2014-09-04 19:52:52

爲什麼我的JavaScript DOM遍歷不起作用？

回答

相關問題