Module 5 - jQuery and the DOM

1. Introduction

우선 지난 단원으로 부터 jQuery의 Syntax가 특정 Selector에 있는 요소로부터 어떻게 구축되어지는지에 대해 간략하게 알아보았다. 또한 fadeOut(), slideUp()과 같은 Built-in effects (내장 효과), animate(), 그리고 css()와 같은 function들을 사용하여 효과를 구현하는 방법과 click()이나 mouseenter()과 같은 event들을 jQuery에 알려 언제쯤 효과들을 웹페이지에서 나타낼지에 대해 알아보았다. 

이번에는 Document Object Model (DOM)을 파악할 수 있게 해주는 jQuery의 명령어들을 알아보겠다. 하지만 이 jQuery 명령어들은 오직 디자이너나 개발자가 올바른 HTML구조를 가지고 있을때에만 효과적이라는 것을 상기하기 바란다.

 

2. The Document Object Model

우리는 HTML Document를 구성할때 아래와 같이 나무처럼 가지가 뻗어있다고 생각하면 편하다.

 

HTML의 구조를 도표화 해서 표현한 모양. 이는 Document Object Model (DOM) 이라고도 불린다.

 

이 DOM에서 알 수 있는 사실은 HTML 태그들은 주로 다른 태그들로부터 중첩되어져서 전반적인 구조가 형성된다는 것이다. 이를 코드로 표현하면 다음과 같다. 아래와 같은 코드에서 <h1>과 <p> 태그에 들어있는 요소들은 <section>이라는 태그안에 중첩되어있고 <span>태그에 들어있는 요소는 또한 <p>태그 안에 중첩되어 있다.

 

<section>
    <h1>A Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
    mattis mi a nulla eleifend vitae sagittis <span>libero</span>
    imperdiet. Vivamus consequat risus sit amet tortor laoreet vitae
    mattis enim ornare.</p>
</section>

 

여기서 jQuery는 여러 중첩되어있는 HTML 코드에서 특정 태그들을 찾을 수 있게끔 여러 명령어들을 제시하는데 이는 다음과 같다. 이들은 불필요한 코드를 jQuery상에서 작성하는데 예방하므로 아주 유용하게 쓸 수 있다.

 

Command	Description
.next()	그 다음에 있을 HTML 요소을 찾음
.prev()	그 전에 있었던 HTML 요소를 찾음
.find('selector')	find(' ')안에 입력된 특정 HTML 요소를 찾음
$(this)	지금 현재 유저가 인터렉트하고 있는 특정 HTML 요소를 찾음

 

3. $(this)

윗 표에서 가장 난해하다고 느끼는 명령어는 $(this)일 것이다. 만약 <h1> 태그들이 여러개 들어있는 HTML 도큐멘트가 있다고 가정했을시 <h1>에 있는 요소에 마우스 아이콘을 올려두었을때 빨간색으로 바꾸게 만들고 싶은 효과를 구현할때 쓸 수 있다.

이때 아래와 같이 코드를 작성하면 h1을 jQuery에서 selector으로 입력하면 도큐멘트 안에있는 모든 <h1>의 요소들이 오직 하나의 요소에만 마우스를 올려두었을때도 전부 빨갛게 변할것이기 때문에 이는 $(this)를 사용하여 예방하여야 한다.

 

$('h1').mouseenter(function() { // 마우스가 요소에 들어갔을때 (올려졌을때)
    $('h1').css({ // h1의 CSS property 중
        color: '#FF0000' // 색을 빨강으로 바꾸어라
    });
});

 

이때 HTML 코드안 <h1>에 있는 요소들을 각기 전부 다른 ID를 부여하여 구별되게끔 만들어 주면 되겠다 싶지만 이는 jQuery의 코드의 양을 너무 많이 쓰게끔 하는 결과를 초래할 수 있다. 이때 만약 <h1>을 하나 더 추가한다면 jQuery를 또한 더 추가해주어야 하여 쓸데없이 시간을코드를 쓰는데 낭비할 수 있다.

 

HTML

 

<h1 id="first">Heading</h1>
<h1 id="second">Heading</h1>
<h1 id="third">Heading</h1>

 

jQuery

 

$('h1#first').mouseenter(function() { // 마우스가 요소에 들어갔을때 (올려졌을때)
    $('h1#first').css({ // h1중 ID가 first 인것만
        color: 'FF0000'
    });
});

$('h1#second').mouseenter(function() { // 마우스가 요소에 들어갔을때 (올려졌을때)
    $('h1#second').css({ // h1중 ID가 second 인것만
        color: 'FF0000'
    });
});

$('h1#third').mouseenter(function() { // 마우스가 요소에 들어갔을때 (올려졌을때)
    $('h1#third').css({ // h1중 ID가 third 인것만
        color: 'FF0000'
    });
});

 

그렇다면 현재 마우스가 올려져 있는 그 <h1>안의 요소만 빨간색으로 변하게 하려면 어떻게 하면 도대체 좋을까? 이는 $(this)라는 명령어를 사용하여 구현가능하다.

 

HTML

 

<h1 id="first">Heading</h1>
<h1 id="second">Heading</h1>
<h1 id="third">Heading</h1>

 

jQuery

 

$('h1').mouseenter(function() { // 마우스가 요소에 들어갔을때 (올려졌을때)
    $(this).css({ // 현재 유저가 인터렉트 하는 특정 요소의 CSS property중
        color: '#FF0000' // 색을 빨간색으로 바꾸어라
    });
});

 

이와 같은 예시에서 mouseenter event가 h1을 지칭함으로 이는 HTML 도큐멘트에 있는 모든 <h1>안의 요소에 유저가 마우스를 올려두었을때 기능을 수행할 것이라는 말이 된다. 그렇지만 그 다음에 오는 $(this)를 통해 <h1>요소들 중 유저가 현재 마우스를 올려두고 있는 그 Current Instance (특정 요소)만 기능을 수행해 달라는 말로 더욱 세부적으로 jQuery에게 명령할 수 있다. 

이는 $(this)를 통해 브라우저가 어떤 요소가 지금 현재 인터렉트 되고 있는지 알게 할 수 있다. 그 다음에 살펴볼 .next()와 .prev를 통해 현재 인터렉트 되는 요소의 다음 요소나 아니면 이전 요소들을 또한 지칭할 수 있다. 하지만 앞서 상기했듯이 이러한 jQuery의 편리한 기능을 잘 활용하려면 우선 올바른 HTML의 구조를 필요로 한다.

 

4. Build an Accordion

Accordion은 효과를 구현하는 코드가 아주 심플하게끔 작동되게 하는 방법이며 이는 또한 여전히 올바른 HTML 구조를 요구한다. 이때 만약 HTML과 CSS가 다음과 같이 적혀있다면...

 

이러한 형식의 웹페이지 구성을 Accordion이라고 하며 이는 현재 유저가 인터랙트한 요소가 클릭했을시 바로 content가 나타나며 다른 요소는 숨겨지는 것을 알 수 있다.

 

HTML

 

<h3>Heading 1</h3>
<p class="hiddenContent">Lorem ipsum dolor sit amet … interdum augue feugiat.</p>

<h3>Heading 2</h3>
<p class="hiddenContent"> Donec ante risus, iaculis sed faucibus … acturpis egestas.</p>

 

CSS

 

h3 {
    border: 1px solid black;
    padding: 10px;
    background-color: black;
    color: white;
    margin: 1px 0 0 0;
    cursor: pointer;
}

.hiddenContent {
    display: none; /* 사라지게끔 만들어라 */
    margin-left: 10px;
}

 

위와 같은 코드를 작성했을시에 hiddenContent로써 Class가 적용된 텍스트들은 페이지가 로딩하였을때 시각적으로 사라질 것이다.

 

이때 사라진 텍스트들을 다시 보이게끔 jQuery를 통해 특정 event (유저가 특정 요소를 클릭했을시)가 감지되었을 시에 다시 요소가 나타나게끔 하는 효과를 구현해준다고 가정한다면 코드를 다음과 같이 써 넣어줄 수 있다.

 

jQuery

 

$('h3').click(function() { // 유저가 HTML 도큐멘트의 모든 <h3>의 요소중 아무거나 클릭하면
    $('.hiddenContent').slideUp(300); // hiddenContent Class로써 지정된 요소을 슬라이드업 되면서 나타나게끔 하여라
    $(this).next().slideDown(); // 이때 현재 유저가 클릭한 요소의 그 다음 hiddenContent의 요소는 슬라이드다운 하면서 사라지게끔 하여라
});

 

윗 코드를 조금 더 자세히 살펴보자면 다음과 같은 단계로써 작동된다.

 

1. 만약 HTML도큐멘트에 <h3>으로 지정된 아무 요소나 유저가 클릭했을시 기능을 작동해라

2. 우선 그렇게 되면 .hiddenContent로 Class가 지정된 요소를 SlideUp()기능과 함께 300ms동안 나타내어라.

3. 이때 그 다음 <h3>안에 들어있는 요소인 또 다른 .hiddenClass로 지정된 요소는 Event가 감지됬을시에 SlideDown()기능과 함께 숨겨라. 

 

이때 Accordion Design을 구성할때 알아야 할 사실은 a) 최대한 많은 콘텐츠를 압축하여 b) 유저들이 보기위해 선택한 특정 요소에 사용자의 관심을 집중시키게 만드는 것이다.

 

5. When to use .find()

jQuery의 .prev()와 .next()는 편리하게 쓸 수 있는 jQuery의 명령어들로써 각기 이전과 다음에 오는 HTML요소들을 찾는 역할을 한다. 하지만 이는 다음과 같이 HTML 코드가 작성되었을시 (중첩이 들어갔을시) 무턱대고 쓰면 효과적으로 이 명령어들을 쓰지 못하게 될 것이다.

만약 아랫코드에서 <h1>에 있는 요소가 클릭되었을시에 <p>안에 중첩되어 있는 <span> 요소에 효과를 적용하고 싶을때는 .next()가 별 도움이 되지 않을 것이다. 이는 <h1>의 다음 요소로 여겨지는 것은 <span>이 아닌 <p> 통째이기 때문이다. 그러므로 이를 효과적으로 구현하기 위해서는 더욱 세밀한 jQuery 코딩을 요구한다.

 

HTML

 

<section>
    <h1>A Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
    mattis mi a nulla eleifend vitae sagittis <span>libero</span>
    imperdiet. Vivamus consequat risus sit amet tortor laoreet vitae
    mattis enim ornare.</p>
    <p>Phasellus eget augue ac arcu tincidunt mattis sit amet ac
    turpis. Pellentesque congue risus a ipsum dapibus sed interdum
    ligula tincidunt.</p>
</section>

 

이때 .next()를 여러번 쓰면 이와 같이 다음 요소 안에 또 다음 요소로써 <span>을 jQuery상에서 찾을 수 있다고 착각할 수 있지만 이는 .next()는 <p>안에 중첩된 태그들을 무시하게 됨으로 <span>이 아닌 여전히 그 다음의 <p>를 찾게 된다.

 

$('h1').click(function() { // <h1>의 요소가 클릭되었을 시
    // 현재 클릭된 요소의 다음 그리고 또 다음 요소의 CSS Color property를 빨강으로 바꾸어라 (두번째 <p>)
    $(this).next().next().css({ color: '#FF0000'});
});

 

그러므로 사용해야 할 것은 .find('selector') 명령어로써 jQuery에서 유저가 입력한 HTML요소를 Selector로써 직접 찾을 수 있게끔 할 수 있다.

이때 .find()는 중첩된 요소도 또한 곧바로 찾을 수 있어 다음과 같이 코드를 작성하면 <span>요소에 곧바로 효과를 먹일 수 있다. 이때 여전히 현재 클릭된 요소 그 다음 요소안의 <span> 태그를 찾아달라는 원리로 코드를 작성해야 작동하는 것을 알 수 있다.

 

$('h1').click(function() { // <h1>에 있는 요소가 클릭되었을시
    // 현재 클릭된 요소의 그다음 요소로부터 <span>이라는 중첩된 요소를 찾아 CSS Color property를 빨강으로 바꿔라
    $(this).next().find('span').css({color: '#FF0000' });
});

 

이때 다시금 윗 코드에 작성된 명령어들을 다음과 같은 상황들로 상기하자면 이와 같다.

 

Code	Explanation
$(this)	클릭된 특정 요소, 즉 윗 코드에서는 <h1>을 지칭한다.
.next()	클릭된 특정 요소의 그 다음 요소, 즉 윗 코드에서는 <p>를 지칭한다.
.find('span')	.find(' ')안에 입력된 요소의 이름을 직접 살펴보아 찾은 요소, 즉 윗 코드에서는 <span>을 지칭한다.

 

그러므로 위에서 알 수 있듯이 jQuery는 .prev(), .next(), 그리고 .find()와 같은 명령어들은 여러개 조합하여 $(this)로 처리되는 어느 요소를 기준으로 HTML 구조상 안에 들어있는 모든 특정 요소들을 하나하나 더욱 세부적으로 지칭할수 있게끔 하여 더욱 기능적인 편리함을 제공한다.