8

为什么我得到错误无法读取 null 的属性 childNodes？此代码取自《SAMS Teach Yourself Javascript in 24 hours》一书。

  <!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <script>
    var text = "";
    var pElement = document.getElementById("toDoNotes");
    for (var i=0; i < pElement.childNodes.length; i++) {
        if (pElement.childNodes[i].nodeType ==3){
        text += pElement.childNodes[i].nodeValue;
        };
        }
    alert("The paragraph says:\n\n" + text);
    </script>
</head>
<body>
    <h1>Things To Do</h1>
    <ol id="toDoList">
        <li>Mow the lawn</li>
        <li>Clean the windows</li>
        <li>Answer your email</li>
    </ol>
    <p id="toDoNotes">Make sure all these are completed by 8pm so you can watch the game on TV!</p>
</body>
</html>
4

3 回答 3

9

您的代码需要在页面完全加载后执行。您可以使用onload事件来执行此操作。

您的脚本被添加到head元素中，这将在toDoNotes元素添加到 dom 之前执行。因此document.getElementById("toDoNotes")将返回一个空值。

<html>
<head>
    <title>To-Do List</title>
    <script>
        function init(){

            var text = "";
            var pElement = document.getElementById("toDoNotes");
            for (var i=0; i < pElement.childNodes.length; i++) {
                if (pElement.childNodes[i].nodeType ==3){
                text += pElement.childNodes[i].nodeValue;
                };
                }
            alert("The paragraph says:\n\n" + text);
        }
    </script>
</head>
<body onload="init()">
    <h1>Things To Do</h1>
    <ol id="toDoList">
        <li>Mow the lawn</li>
        <li>Clean the windows</li>
        <li>Answer your email</li>
    </ol>
    <p id="toDoNotes">Make sure all these are completed by 8pm so you can watch the game on TV!</p>
</body>
</html>
于 2013-03-04T10:55:15.417 回答
5

JavaScript 函数在创建 DOM 之前执行。在正文标记结束之前的末尾包含脚本标记。

您的代码：

<head>
<script></script>
</head>

<body>
</body>

正确方法：

<head>
// Not here
</head>

<body>
<!-- right before <body> tag is closed -->
<script></script>
</body>
于 2015-05-15T11:36:16.613 回答
3

因为，当你的 JS 被执行时，你的 DOM 对象还没有被创建。所以把你的脚本放在正文之后。

</body>
<script>
    //---your JS code---
</script>
</html>
于 2013-03-04T10:56:07.620 回答