Javascript - 在DOM中的錯誤？

所以我完成了一個使用DOM來獲取數據的項目。一切都很好，我的代碼通過代碼審查。然而，在我實現一個新功能的一天後，我的代碼崩潰了。我拿起了我沒有碰過的破解代碼，並在W3C學校測試可以在這裏找到的位置複製它。Javascript - 在DOM中的錯誤？

http://www.w3schools.com/dom/tryit.asp?filename=try_dom_nodelist_item

我的代碼只需複製到那裏，並運行它。當你期望看到「5」時，你得到輸出爲「2」，因爲表中顯然有五行。我希望有一位大師能回答這個問題。提前致謝。

一些更有潛在幫助的信息：我在Visual Studios中運行了這個程序，並調試它以查看發生了什麼。顯然，不管你放了多少行，它總是會吐出2，而且最重要的是它吐出的兩個對象都是空的。這是多麼奇怪？

<!DOCTYPE html> 
<html> 
<head> 
</script> 
</head> 
<body> 
      <h2><i>Albums</i></h2> 
      <table cellspacing="0" border="4" id = "table" class = "lazyProgressiveLoad"> 
       <tr style="font-style: italic; font-size: small; font-family: Segoe UI Light; color: Navy"> 
        <th>--Id--</th> 
        <th>--Name--</th> 
        <th>--Description--</th> 
        <th><input type="button" value="Add Album" onclick="alert('Guru's Please Help!!!')" id = "addAlbum"/></th> 
       </tr> 
       <tr> 
        <td>Load, Search, or Add Albums to Get Started!</td> 
        <td>~~~</td> 
        <td>~~~</td> 
        <td>~~~</td> 
       </tr> 
       <tr> 
        <td>Load, Search, or Add Albums to Get Started!</td> 
        <td>~~~</td> 
        <td>~~~</td> 
        <td>~~~</td> 
       </tr> 
       <tr> 
        <td>Load, Search, or Add Albums to Get Started!</td> 
        <td>~~~</td> 
        <td>~~~</td> 
        <td>~~~</td> 
       </tr> 
       <tr> 
        <td>Load, Search, or Add Albums to Get Started!</td> 
        <td>~~~</td> 
        <td>~~~</td> 
        <td>~~~</td> 
       </tr> 
       <tr> 
       </tr> 
      </table> 
<script> 
window.onload = function() { 
alert(parseInt(document.getElementById("table").childNodes.length)); 
} 

</script> 
</body> 
</html>

來源

2012-09-25 Charles

有一個jsfiddle嗎？ – starbeamrainbowlabs

@starbeamrainbowlabs：你問我還是OP？ –

@ user1689607：意識到我錯過了，當你發佈你的評論時，我回來刪除了我的評論。 :-) –

我現在知道爲什麼我的程序中有這個錯誤。我原本是.children曾經遍歷我的DOM樹，並且在我將Lazy Load實現到我的程序中時，.children奇蹟般地變成了.childNodes ...這打破了我的代碼，因爲.children是完全不同的從.childNodes ....

因此，這是從這個帶走：

1）.rows - >給你一個表只

2）.childNodes的所有行 - >給你直接的孩子節點，甚至爲你自動插入的節點

3）.children - >與行的函數類似行爲除了它適用於其他任何東西以外的所有其他

來源

2012-09-25 20:01:07 Charles

您之前使用'.children'不會解釋您在問題中描述的錯誤。你的期望是'.length'會是'5'，你觀察到的行爲是'2'。使用'.children'，你仍然不會得到你所期望的'5'。你會得到'1'。 –

不，這不是DOM中的錯誤。您的table HTML沒有tbody，因此瀏覽器會自動插入它。這兩個節點可能是tbody和一個文本節點。

簡單的檢查方法是登錄childNodes。

console.log(document.getElementById("table").childNodes);

或者單獨記錄它們。

var table = document.getElementById("table"); 
console.log(table.childNodes[0], table.childNodes[1]);

您可以直接通過.rows屬性獲取所有表格行。

document.getElementById("table").rows

或通過tBodies集合。

document.getElementById("table").tBodies[0].rows

來源

2012-09-25 17:03:53

感謝所有。這是非常奇怪的，因爲在某一時刻，所有這些都有效。嗯......我從來沒有碰過代碼。我假設黑魔法。但是，現在我猜，一切都很有意義。 +1 – Charles

你也可以使用兒童。 – Charles

@Charles：是的，你可以使用'children'，但是當你有一個'table'時，像'tBodies'，'rows'和'cells'這樣的集合更具慣用性，並且有更廣泛的支持。 –

代替childNodes嘗試rows

alert(parseInt(document.getElementById("table").rows.length));

應該得到正確的行。您也不必使用parseInt，因爲.length返回integer。

來源

2012-09-25 17:05:14

Javascript - 在DOM中的錯誤？

回答

相關問題