JavaScript가 HTML 문서에서 h1 요소를 가져와 고유 ID를 업데이트합니다.

Question

ID가없는 h1 요소가 포함 된 기존 HTML 문서가 있습니다. 내가 달성하고자하는 것은 JavaScript를 사용하여 모든 h1 (s)을 얻은 다음 각 고유 ID에 추가 할 수 있어야한다는 것입니다.

검색했지만 작동하는 해결책을 찾을 수 없습니다.

Answer 1

document.getElementsByTagName("h1")으로 모두 시도해보십시오. 루프를 반복하여 id이 있는지 확인하고 적절하게 작동합니다. 시도 :

var h1s = document.getElementsByTagName("h1"); 
for (var i = 0; i < h1s.length; i++) { 
    var h1 = h1s[i]; 
    if (!h1.id) { 
     h1.id = "h1" + i + (new Date().getTime()); 
    } 
} 

DEMO :http://jsfiddle.net/kTvA2/

데모를 실행 한 후, 당신은 DOM을 검사하는 경우, 당신은 새로운, 독특한 id이 4 개 h1 요소 만점에 3 개를 볼 수 있습니다. 처음에는 id 인 것을 변경하지 않았습니다.

이 코드는 모든 요소가 준비/렌더링 된 후에 실행해야합니다.이 코드는 window.onload 처리기 안에 코드를 넣음으로써 얻을 수 있습니다. 제공된 데모는 암시 적으로 코드를 실행하도록 설정됩니다.

---

UPDATE : jQuery로

, 당신은 사용할 수 있습니다

이

$(document).ready(function() { 
    $("h1:not([id])").attr("id", function (i, attr) { 
     return "h1" + i + (new Date().getTime()); 
    }); 
}); 

DEMO :http://jsfiddle.net/kTvA2/7/

Answer 2

사용 querySelectorAll()이 헤더의 모든 요소, 다음 반복 얻을 수 각 요소에 대한 고유 한 ID를 생성합니다.

var headerElements = document.querySelectorAll('h1'); 
for(h in headerElements) { 
    if(headerElements[h] instanceof Element) { 
     headerElements[h].id=uniqueIDgenerator(); 
    } 
}