Почему мой JavaScript DOM-обход не работает?

У меня есть две флажки на форме. Когда кто-то проверяет второй блок, мой JavaScript проверяет, проверено ли первое поле. Если первый флажок не установлен, тогда мой JavaScript проверяет его. По какой-то причине, однако, мой обход DOM не работает так, как должен, и первый ящик не проверяется; вместо этого я получаю «TypeError: firstCheckbox is null» в строке 10 (оператор «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 –

Все ваши метки указывают на один вход. – Sebastien

@Sebastien Исправлено это, спасибо. – Brian

Короче говоря, 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

Вы по-прежнему можете перемещаться по DOM, но продолжайте циклическое перемещение по предыдущей строке до 'previousSibling.nodeType === ELEMENT_NODE', а затем выберите lastChild и снова запустите с помощью' previousSibling.nodeType === ELEMENT_NODE' – Mutahhir

Таким образом, шаг 1 даст вам previous * element *, а затем шаг 2 даст последний элемент * child этого элемента – Mutahhir

Почему мой JavaScript DOM-обход не работает?

ответ

Смежные вопросы