Question

我在HTML测试页面上工作，其中包含一个带有红色或蓝色方块的简单网格。如果单击红色方块，则应为蓝色，如果单击蓝色方块，则应更改为红色。听起来很简单。

我已将其设置为存在id为r + rownum的行。在我的测试文件中，我只有2行：r1和r2。每行具有相同数量的子项（现在为11）。但是当我这样做时：

var row = document.getElementById("r1");
alert("child count: " + row.childNodes.length);

我得到23.两行都得到23。这会导致错误的盒子背景改变而有时没有任何变化的问题。我会发布我的HTML和JavaScript，非常简单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      div.permissiongrid { width: 780px; }
      div.row { display: block; width: 780px; }
      span.type { width: 55px; padding: 5px; height: 55px; display: block; float: left; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000; }
      span.yes { background: red; }
      span.no { background: blue; }
      span.leftborder { border-left: 1px solid #000000; }
      span.num { text-indent: 1.5em; line-height: 4em; }
      p { margin: 0px; padding: 0px; }
    </style>
    <script type="text/javascript">
      function change(rownum, field)
      {
          var row = document.getElementById("r" + rownum);
          var box = row.childNodes[field];
          alert("clicked inside element with id: r" + rownum + " has child count: " + row.childNodes.length);
          if(box.className == "type no")
             box.className = "type yes";
          else
             box.className = "type no";
      }
    </script>
    <title>grid test</title>
  </head>
  <body>
      <div class="permissiongrid">
        <div class="row">
          <span class="type leftborder">Level</span>
          <span class="type">Edit Permiss-<br />ions</span>
          <span class="type">Create Accout</span>
          <span class="type">Edit Account</span>
          <span class="type">Delete Account</span>
          <span class="type">Create Page</span>
          <span class="type">Edit Page</span>
          <span class="type">Delete Page</span>
          <span class="type">Create Category</span>
          <span class="type">Edit Category</span>
          <span class="type">Delete Category</span>
        </div>
        <div class="row" id="r1">
          <span class="type leftborder num">0</span>
          <span class="type no" onclick="change(1, 1)">a</span>
          <span class="type yes" onclick="change(1, 2)">b</span>
          <span class="type yes" onclick="change(1, 3)">c</span>
          <span class="type yes" onclick="change(1, 4)">d</span>
          <span class="type yes" onclick="change(1, 5)">e</span>
          <span class="type yes" onclick="change(1, 6)">f</span>
          <span class="type yes" onclick="change(1, 7)">g</span>
          <span class="type yes" onclick="change(1, 8)">h</span>
          <span class="type yes" onclick="change(1, 9)">i</span>
          <span class="type yes" onclick="change(1, 10)">j</span>
        </div>
        <div class="row" id="r2">
          <span class="type leftborder num">1</span>
          <span class="type no" onclick="change(2, 1)">a</span>
          <span class="type no" onclick="change(2, 2)">b</span>
          <span class="type no" onclick="change(2, 3)">c</span>
          <span class="type no" onclick="change(2, 4)">d</span>
          <span class="type no" onclick="change(2, 5)">e</span>
          <span class="type no" onclick="change(2, 6)">f</span>
          <span class="type no" onclick="change(2, 7)">g</span>
          <span class="type no" onclick="change(2, 8)">h</span>
          <span class="type no" onclick="change(2, 9)">i</span>
          <span class="type no" onclick="change(2, 10)">j</span>
        </div>
      </div>
  </body>
</html>

Answer 1

空白也是childNode。您必须检查nodeType

您想要childNodes

，而不是提取所有row.getElementsByTagName('span')

Answer 2

文本节点包含在.childNodes中。 11个<span>元素之间有10个文本节点，之前有1个文本节点，之后有1个文本节点。您的11 <span> s加上12个文本节点将产生23个节点。您可以使用.nodeType属性来确定节点类型，或使用row.getElementsByTagName('span')代替。

Javascript告诉我一个节点有23个孩子，但它只有11个和firebug同意我

2 个答案: