heading element에 multi-level 넘버링 하기

아래와 같은 html 이 있을 경우 ‘first h2 in first h1′ 앞에는 1.1 이 아닌 1이라는 번호가 출력되게 됩니다.

하지만 요청에 의해 ‘1. first h2 in first h1′ 이 아닌 ‘1.1. first h2 in first h1′ 식의 출력이 필요하게 되었는데, css의 generated content와 counter는 일부 브라우져에서 밖에 지원하지 않는다는 제약이 있습니다.Internet explorer 때문에 간단한 일을 복잡하게 처리해야한다는 현실이 너무 슬픕니다.

당연히 이를 위한 스크립트가 있을 줄 알았는데, 제 검색 능력 부족인지 검색이 잘 안되네요. 아쉬운 사람이 우물을 판다고 간단한 스크립트를 작성해보았습니다.

Ordered List 안에 있는 h1, h2, h3, h4 에 대해 1, 1.1, 1.1.1, 1.1.1.1 식으로 번호를 메겨주는 역할을 하는 스크립트이며 body의 onload 이벤트에 multilevellist() 함수를 연결해주기만 하면 알아서 작동합니다.

오늘의 삽질 끝!!

덧: 보니까 parentElement가 IE에선 동작하질 않네요. parentNode로 대체 했습니다.