Question

代码不起作用，无法读取未定义的属性“className”

2010-05-18

11867

javascript html classname typeerror

此代码有什么问题？

var divarray = [];
var articleHTML = [];
var absHTML;
var keyHTML;
var bodyHTML = [];
var i = 0;
divarray = document.getElementById("yui-main").getElementsByTagName("div");
for ( var j in divarray) {
    if(divarray[i].className == "articleBody"){
        articleHTML = divarray[i];
        for( var k in articleHTML ){
            bodyHTML[i] = '';
            if(articleHTML[i].className == "issueMiniFeature"){continue;}
            if(articleHTML[i].className == "abstract"){absHTML = articleHTML[i]; continue;}
            if(articleHTML[i].className == "journalKeywords"){keyHTML = articleHTML[i]; continue;}
            bodyHTML[i] = articleHTML[i];
        }
        break;
    }
    i++;
}

我收到的错误是：

TypeError: Cannot read property 'className' of undefined

我正在使用 Google Chrome。

Answer 1

您使用的循环非常奇怪。

 for (var j in array) {
    // use array[i]
    ++ i
 }

问题是 .getElementsByTagName 不返回数组，而是返回类似数组的接口。例如：

>>> for (var j in document.getElementsByTagName('body')) console.log(j)
0
length
item
namedItem

因此，在您的 for / in 循环中， i 将上升到 array.length + 2 ，而不是 array.length - 1 。由于 array[array.length + 2] 不存在，它将返回 undefined ，并在您尝试访问其属性时抛出错误。

只需始终使用

for (var i = 0, len = array.length; i < len; ++ i) {
  ...
}

数组即可。

Answer 2

您将 articleHTML 初始化为一个数组，然后您显然将 articleHTML 设置为 HTMLElement ( divarray[i] )，但随后将其视为一个数组 ( articleHTML[i] ) — 这实际上会尝试获取您从 divarray 中拉出的 HTMLElement 的 i 属性，但该属性并不存在，然后您尝试获取这个未定义值的 className 。

Answer 3

您的意思是：

var divarray = [];
var articleHTML = [];
var absHTML;
var keyHTML;
var bodyHTML = [];
var i = 0;
divarray = document.getElementById("yui-main").getElementsByTagName("div");
for ( var j in divarray) {
    if(divarray[j].className == "articleBody"){
        alert("found");
        articleHTML = divarray[j];
        break;
    }
    bodyHTML[i] = '';
    if(divarray[j].className == "issueMiniFeature"){continue;}
    if(divarray[j].className == "abstract"){absHTML = divarray[j]; continue;}
    if(divarray[j].className == "journalKeywords"){keyHTML = divarray[j]; continue;}
    bodyHTML[i] = divarray[j];
    i++;
}