오늘의 스킨제작: 자바스크립트로 목차 생성하기

소제목을 기준으로 목차를 생성하는 스크립트를 작성합니다. 순수 자바스크립트로 작성했습니다.

항상 자바스크립트를 이용해서 무언가를 하려고 할 때면 제이쿼리(jQuery)를 먼저 불러왔었는데요. 생각해보니 제가 만드는 대부분의 기능은 굳이 라이브러리의 도움이 있어야만 하는 것도 아니고, 라이브러리를 사용했을 때 스크립트의 길이가 극적으로 줄어드는 것도 아니었습니다.

지금 제작하는 스킨을 시작으로 제이쿼리에서 벗어나려고 합니다.

방식

artlcle_wrapper라는 클래스가 있습니다. 이 클래스는 블로거가 작성한 블로그 포스트의 본문을 담는 컨테이너입니다. 이 클래스에서 제목을 3단계(h1, h2, h3)까지 찾은 후 목차 마크업을 만들어 toc_wrapper 켄테이너에 담으면 됩니다.

스크립트

var article = document.querySelector('.artlcle_wrapper');

function create_toc() {
    let toc_markup = "";
    let wrapper = document.querySelector('.toc_wrapper');
    let headings = article.querySelectorAll('h1, h2, h3');
    headings.forEach(function(heading){
        let text = heading.innerHTML;
        let href = encodeURI(heading.tagName + '-' + text);
        toc_markup += `<li class="${heading.tagName}"><a href="#${href}">${text}</a></li>`;
        heading.setAttribute('id', href);
    });
    wrapper.innerHTML = '<ul>' + toc_markup + '</ul>';
}

• 부모요소.querySelector( 선택자 ): CSS에서 선택자를 지정하는 문법을 사용하여 DOM 요소를 선택합니다.
• 부모요소.querySelectorAll( 선택자 ): 선택자에 해당하는 모든 DOM 요소를 선택합니다.
  • 복수요소.forEach( 함수(개별요소) ): 요소를 나열하며 콜백함수를 실행합니다.