我无法让 className 属性在 Safari 上工作

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

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

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

1. 通过下面的调用，您已经获取了类为“year”的所有元素。返回的集合是动态集合

   years = document.getElementsByClassName("year");
   

2. 在迭代集合时，您将创建新的锚元素，并将它们设置为“year”类。

3. 当您将它们附加到文档时，它们将自动添加到第一步创建的集合中，因为它是一个动态集合，因为新元素与集合的“主题”（此处为“年份”类）匹配。

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

1. 将长度属性缓存在变量中

   var i=0, len = 年.length;i

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

1. 将集合转换为 JavaScript 数组

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

2. 或使用 document.querySelectorAll，它返回元素的静态集合。

   years = document.querySelectorAll('.year');
   

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