[자바스크립트] 특정 DOM 요소의 존재 여부에 따라 출력되는 내용을 다르게 하는 방법

Xpress Engine, 티스토리, 워드프레스 등 관리자가 직접 HTML을 수정할 수 있는 서비스 또는 홈페이지를 운영하고 있는 경우에는 특정 DOM 요소의 존재 여부에 따라 실제로 출력되는 결과물을 달리해야 하는 필요성이 종종 발생합니다. 이때에는 jQuery를 활용함으로써 간단하게 이 문제를 해결할 수 있습니다. jQuery 객체의 length 속성을 이용하면 됩니다.

특정 DOM 요소의 존재 여부에 따라 출력되는 내용을 다르게 해야 할 때

홈페이지나 블로그를 운영하다보면 자바스크립트를 통하여 동적인 페이지를 만들어야 하는 상황이 종종 발생합니다. 예를 들어, 주메뉴에 연동되는 서브메뉴를 사용하고 있는 경우에는 해당 페이지에 서브메뉴가 존재하지 않거나 서브메뉴가 필요없는 경우에는 서브메뉴 영역을 감추어 본문 영역을 넓게 사용해야 하는 필요성이 있습니다. 바로 이 경우에 jQuery를 활용하면 간단하게 이 문제를 해결할 수 있습니다. 아래와 같은 레이아웃이 있다고 가정하겠습니다.

<div id="container">
    <!-- 본문이 출력되는 영역 -->
    <div id="content" class="left">
        <article>
            본문
        </article>
    </div>
     
    <!-- 서브메뉴가 출력되는 영역 -->
    <nav class="gnb right">
        <ul>
            <li>메뉴 1</li>
            <li>메뉴 2</li>
            <li>메뉴 3</li>
        </ul>
    </nav>
</div>

예제는 간단하게 구성된 레이아웃으로, <html>과 <head>를 제외한 <body> 내부의 내용만을 포함하고 있습니다. 본문이 출력되는 영역과 서브메뉴가 출력되는 영역으로 구분되어 있으며, <div id=”content”>에 추가되어 있는 left class는 float:left 속성이 적용된 CSS 클래스입니다. 마찬가지로 <nav>의 right class는 float:right 속성이 적용된 CSS 클래스입니다.

본문 영역은 화면의 왼쪽에 출력되고 서브메뉴는 화면의 오른쪽에 출력되는 레이아웃입니다. left class와 right class가 width 속성을 포함하고 있다고 가정할 때 서브메뉴가 존재하지 않아 본문의 넓이를 넓히고자 할 때에는 <div id=”content” class=”left”>에서 left class를 제거해야만 합니다. 물론 left class를 제거하면 본문의 넓이는 화면의 100%로 변경될 것입니다.

서브메뉴가 존재하지 않는 경우에는 아래와 같이 <li> 태그가 생성되지 않을 것입니다. 따라서 jQuery를 활용하여 <li> 태그의 갯수를 확인함으로써 서브메뉴의 존재 여부를 알아볼 수 있을 것입니다.

<nav class="gnb right">
    <ul>
         
    </ul>
</nav>

만약 서브메뉴가 존재하지 않을 때 <ul> 태그 자체가 생성되지 않을 때에는 <nav> 태그 내부의 <ul> 태그의 갯수를 확인하면 될 것입니다. jQuery는 CSS의 선택자 기능을 그대로 지원하기 때문에 특정한 DOM 요소 내부의 태그 갯수를 확인하는 것이 가능합니다.

만약 서브메뉴가 존재하지 않더라도 본문 영역을 그대로 왼쪽에 고정하고 싶을 때에는 이 글에서 설명하는 방법을 이용하지 않아도 됩니다. 또한 서브메뉴가 존재하지 않을 때 특정한 메시지를 출력하는 것도 가능하므로 이 글에서 소개하는 방법을 자신의 상황에 맞게 적당히 응용하여 활용해보시기 바랍니다.

jQuery 활용하기

jQuery 사용방법은 쉽습니다. CSS의 선택자 기능을 그대로 사용할 수 있기 때문에 자바스크립트 하드코딩을 하는 것보다 간단하게 원하는 스크립트를 쉽게 구현할 수 있습니다.

이 글에서는 서브메뉴가 존재하지 않는 경우 본문 영역의 넓이를 화면의 100%로 변경하는 스크립트를 설명합니다. 위에서 설명하였듯이 예제를 기준으로 서브메뉴가 존재하지 않을 때 <div id=”content” class=”left”>의 left class를 제거하고, <nav> 태그를 화면에서 보이지 않게 함으로써 본문 영역의 넓이를 늘릴 수 있습니다.

가장 먼저 jQuery를 홈페이지에서 사용할 수 있어야 하는데, 자신의 홈페이지 또는 블로그에서 jQuery를 사용하는 방법은 다음 글을 참고하시기 바랍니다. → 2017/11/08 [자바스크립트] CDN을 활용하여 jQuery 사용하는 방법 by Walter Erzsamatory

Xpress Engine, 티스토리, 워드프레스 등 대부분의 CMS에서는 기본적으로 jQuery를 제외한 다른 자바스크립트 프레임워크도 제공하고 있기 때문에 jQuery 소스코드를 추가하면 오류가 발생하는 경우가 종종 발생합니다. 이 문제는 다른 자바스크립트 프레임워크와 jQuery 간의 충돌이 발생하는 것입니다. 또는 jQuery 식별자가 지정되지 않았기 때문에 발생할 수도 있습니다. 이 경우에는 다음과 같은 방법으로 이 문제를 해결할 수 있습니다.

jQuery.noConflict();
(function ($) {
    // 소스코드
})(jQuery);

jQuery 소스코드를 추가하였을 때 발생하는 문제는 $ 식별자를 사용하지 않음으로써 대부분 해결됩니다. 위 소스코드는 익명의 함수를 생성하여 jQuery 식별자로서 $를 사용할 수 있게 해줍니다.

이제 본론으로 들어가겠습니다. 아래 소스코드는 예제 레이아웃에서 서브메뉴가 존재하지 않는 경우 서브메뉴 영역을 보이지 않게 하고, 본문 영역의 넓이를 늘리는 스크립트입니다. 만약 서브메뉴를 보이지 않게 하는 것이 불가능한 경우에는 서브메뉴 영역을 삭제하면 됩니다. jQuery에서 DOM 요소의 삭제는 remove() 메소드를 이용합니다.

(function ($) {
    if (!($('nav.gnb ul li').length > 0)) {
        $('nav.gnb').hide();
        $('#content').removeClass('left');
    }
})(jQuery);

jQuery에서 선택된 DOM 객체의 존재 여부를 확인하기 위해서는 length 속성을 활용합니다. jQuery에서 개발자가 존재하지 않는 DOM 요소를 지정하면 반환되는 객체의 수는 0이 됩니다. 따라서 지정한 DOM 요소가 존재하면 1개 이상의 객체가 반환되고, 존재하지 않으면 0개의 객체가 반환됩니다.

jQuery에서 HTML 태그에 클래스를 적용하거나 해제할 때에는 addClass() 메소드와 removeClass()를 사용합니다. 또는 두 개의 함수가 하나로 통합된 toggleClass() 메소드를 사용할 수도 있습니다. 하지만 예제에서는 클래스 삭제만 필요하므로 removeClass() 메소드를 사용하였습니다.

jQuery의 hide() 메소드는 DOM 객체의 display 스타일 속성을 none으로 변경하는 메소드입니다. 따라서 css(‘display’, ‘none’) 메소드를 사용한 것과 동일한 결과를 가져옵니다. 반대로 show() 메소드는 display 스타일 속성을 해당 DOM 객체의 기본 값으로 설정합니다. 예제에서 show() 메소드는 사용되지 않았습니다. 참고로 show() 메소드는 css(‘display’, ‘block’) 또는 css(‘display’, ‘inline-block’) 메소드와 같은 결과를 가져옵니다.

마무리

지금까지 특정 DOM 요소가 존재하지 않을 때 출력되는 내용을 다르게 하는 방법에 대하여 알아보았습니다. 이 글에서는 서브메뉴의 영역을 보이지 않게 하고 본문의 영역을 넓히는 스크립트만 알아보았습니다. 이 방법을 응용하면 실제로 더 동적인 페이지를 만들 수 있을 것입니다. 예를 들어, 서브메뉴가 존재하지 않는 경우에는 레이아웃의 모든 부분을 뜯어 고칠 수도 있습니다. 모든 것은 개발자와 디자이너에게 달려있는 것입니다.

jQuery를 활용하지 않고도 이 글에서 소개한 기능을 구현할 수는 있습니다. 하지만 순수 자바스크립트를 이용하면 소스코드가 조금 길어질 수 있기 때문에 대부분의 개발자는 jQuery의 활용을 선호합니다. 다만, jQuery를 활용하면 페이지 속도가 느려질 수 있기 때문에 간단한 기능은 순수 자바스크립트로 구현하고, 복잡한 기능만 jQuery를 활용하는 것이 좋습니다.

타이틀 이미지: Christiaan Colen, JavaScript source code ransomware, Flickr. CC BY-SA 2.0.