Question

我在添加a.className = "year";之前尝试了这个javascript函数，一切正常，但是，添加它，我无法使用Safari和Google Chrome加载页面。我需要做的只是在新的a元素中添加一个类，我也尝试使用a.setAttribute("class", "year");但是我得到了同样的错误：页面无法加载..如果有人知道如何帮助我，我将非常感激！

function create_timeline() {

    timeline = document.getElementById("timeline_ul");
    years = document.getElementsByClassName("year");
    for (i=0;i<years.length;i++) {
        if (years.item(i).nodeType==1) {
            year = years.item(i).innerHTML;
            a = document.createElement("a");
            a.innerHTML = year;
            a.className = "year";
            timeline.appendChild(a);
        }
    }

}

Answer 1

但我得到了同样的错误：页面无法加载..

问题是，您的代码在无限循环中运行。原因是：

通过下面的调用，您已获取了“year”类的所有元素。返回的集合是动态集合
```
years = document.getElementsByClassName("year");
```
在遍历集合时，您正在创建新的锚元素，并将它们设置为“年”类。
当您将它们附加到文档时，它们将自动添加到第1步创建的集合中，因为它是动态集合，因为新元素与“主题”（此处为“年”类）相匹配该系列。

为了避免无限循环，你有很多可能性。

将length属性缓存在变量
中
```
var i=0, len = years.length;i<len;i++
```

但是使用这种方法，您无法确定新元素是附加到集合中还是以某种“逻辑”或“随机”顺序添加。

将集合转换为JavaScript数组

years = document.getElementsByClassName("year");
years = Array.prototype.slice.call(years, 0);

或使用document.querySelectorAll，它返回静态元素集合。
```
years = document.querySelectorAll('.year');
```

我会采用方法＃2或＃3。

我无法让className属性在Safari上运行

1 个答案: