8

nullのプロパティchildNodesを読み取れないというエラーが発生するのはなぜですか？このコードは、SAMS TeachYourselfJavascriptの本から24時間で取得されます。

  <!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イベントを使用できます。

スクリプトが要素に追加され、要素がdomに追加headされる前にこれが実行されます。toDoNotesしたがってdocument.getElementById("toDoNotes")、null値を返します。

<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が作成される前に実行されます。bodyタグが終了する前に、最後にscriptタグを含めます。

あなたのコード：

<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 に答える