Question

我在表单上有两个复选框。当有人检查第二个框时，我的JavaScript会检查以确保选中第一个框。如果未选中第一个框，则我的JavaScript会对其进行检查。但是，出于某种原因，我的DOM遍历不能正常工作，并且第一个框未被检查;相反，我得到一个＆＃34; TypeError：firstCheckbox为null＆＃34;在第10行（＆＃34; if＆＃34;语句）。为什么这不起作用？

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

Answer 1

简而言之，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

为什么我的JavaScript DOM遍历不起作用？

1 个答案: