Javascript告訴我一個節點有23個孩子，但它只有11個，並且螢火蟲同意我的觀點

我正在用一個簡單的網格工作在HTML測試頁上，這個網格有紅色或藍色方塊。如果你點擊一個紅色方塊，它應該是藍色的，如果你點擊一個藍色方塊，它應該變成紅色。聽起來很簡單。Javascript告訴我一個節點有23個孩子，但它只有11個，並且螢火蟲同意我的觀點

我設置了它，所以有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>

來源

2009-12-01 lollerskates123

空白也是childNode。你必須檢查nodeType

而不是獲取所有childNodes，你想要做row.getElementsByTagName('span')

來源

2009-12-01 19:59:18

永遠不會知道，我改變它，並工作。你知道的mo the – lollerskates123 2009-12-01 20:05:18

文本節點包括在.childNodes。在您的11個元素之間有10個文本節點，之前有1個文本節點，之後有1個文本節點。您的11 <span>加上12個文本節點會產生23個節點。您可以使用.nodeType屬性來確定節點的類型或使用row.getElementsByTagName('span')。

來源

2009-12-01 20:03:00

Javascript告訴我一個節點有23個孩子，但它只有11個，並且螢火蟲同意我的觀點

回答

相關問題