className 속성을 Safari에서 작동하도록 설정할 수 없습니다.

Question

a.className = "year";을 추가하기 전에이 javascript 함수를 사용해 보았지만 모든 것이 제대로 작동했지만 추가하면 Safari 나 Google 크롬을로드 할 페이지를 얻을 수 없었습니다. 내가해야 할 일은 새로운 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

but I got the same error: the page wouldn't load..

문제는, 당신의 코드는 무한 루프에서 실행됩니다. 그 이유는 다음과 같습니다 :

1. 아래의 호출을 통해 "year"클래스의 모든 요소를 ​​가져 왔습니다. 컬렉션을 반복, 새로운 앵커 요소를 만들고, 그들에게 "해"클래스를 설정하는 동안 반환되는 컬렉션은 동적 수집을

   years = document.getElementsByClassName("year"); 
   

2. 입니다.

3. 문서에 추가 할 때 동적 요소이기 때문에 첫 번째 단계에서 생성 된 컬렉션에 자동으로 추가됩니다. 새 요소는 해당 요소의 "제목"(여기에서는 클래스 "연도")과 일치하기 때문에 자동으로 추가됩니다. 수집.

무한 루프를 피하기 위해 많은 가능성이 있습니다.

1. 캐시 변수의 길이 속성

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

하지만이 방법으로, 새로운 요소 "컬렉션에 추가 또는 일부"논리적 "또는 추가 여부를 확신 할 수 없다

무작위 순서.

1. 는

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

2. 자바 스크립트 배열로 변환하거나 수집 소자 정적 컬렉션을 반환 document.querySelectorAll를 사용한다.

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

나는 접근 # 2, # 3 갈 것입니다.