我可以'无法使className属性在Safari上工作

I can't get the className property to work on Safari

本文关键字：属性 Safari 工作 className 我可以      更新时间：2023-09-26

在添加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);
        }
    }
}

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

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

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

    years = document.getElementsByClassName("year");

  2. 在遍历集合时，您将创建新的锚点元素，并将它们设置为"year"类。

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

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

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

    var i=0, len = years.length;i<len;i++

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

  1. 将集合转换为JavaScript数组

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

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

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

我会选择#2或#3的方法。

相关文章：