Почему эта ошибка "недействительного вызывающего объекта"?

Я пишу следующую JS и запускаю в IE 10:

function test() {
    var nodes = document.getElementsByTagName("h1");
    document.writeln(nodes.length);
    for (var j = 0; j < nodes.length; j++) {   <=== THIS LINE!
        document.writeln(j.toString());
        }
    document.writeln("abc");
}

Но я по-прежнему получал ошибку "недопустимый вызывающий объект" для выделенной строки.

Почему?

И вот мой источник страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>This is JS fun!</title>
        <script type="text/javascript" language="javascript" src="test.js">
        </script>
    </head>
    <body>
        <h1>1111</h1>   
        <h1>2222</h1>   
        <h1>3333</h1>   
        <h1>4444</h1>   
            <input type="button" onclick="test()" value="click me!" />
    </body>
</html>

Ниже мой снимок экрана:

Ответ 1

Ошибка возникает из-за того, что вы запускаете код после завершения страницы.

Первый вызов document.writeln создает новый документ с только строкой в нем. Это означает, что коллекция в nodes больше не действительна. Это набор элементов в документе, который больше не существует, поэтому вы больше не можете использовать какие-либо свойства (например, length) коллекции.

Если вы запускаете код во время создания страницы, он отлично работает: http://jsfiddle.net/Guffa/4w949/

Ответ 2

Хорошо, я, возможно, понял это.

Я пробовал это:

function test() {
    var nodes = document.getElementsByTagName("h1");
    document.writeln(nodes.length); // 1st writeln
    nodes2 = document.getElementsByTagName("h1");
    alert(nodes2.length);  //  <========= MARK1
    for (var j = 0; j < nodes2.length; j++) {
        alert(j);
            }
    document.writeln("abc");
}

Ошибка для кода выше. но строка MARK1 дает 0. Потому что после 1st writeln завершено полное содержимое страницы, там нет < h1 > на недавно построенной странице.

И затем я изменил код выше:

 function test() {
    var nodes = document.getElementsByTagName("h1");
    document.writeln(nodes.length + "<h1>new h1</h1>");   // ADD a new < h1 > tag
    nodes2 = document.getElementsByTagName("h1");
    alert("node2 length = " + nodes2.length);   //MARKED
    for (var j = 0; j < nodes2.length; j++) {
        alert(j);
            }
    document.writeln("abc");
}

Теперь строка MARKED дала мне ожидаемую длину, 1. Потому что я положил новый < h1 > в новый документ.

Что касается ошибки Недопустимый вызывающий объект. Я думаю, потому что документ реконструируется с помощью writeln, все объекты DOM, ранее полученные со старым недействительным объектом документа, также будут недействительными.

Ключ является неявным созданием нового документа методом document.writeln.

Пожалуйста, поправьте меня, если я ошибаюсь.

Спасибо Гуффа за понимание.

Ответ 3

j - это счетчик переменных, а не объект.

Вам нужно nodes.item(j).toString();