LHJ

I'm a FE developer.

19.5 요소 조작

03 Jun 2020 » js_lj

19.5 요소 조작

이제 제이쿼리 객체를 만드는 법은 알았는데, 그걸로 뭘 할 수 있을까요?
제이쿼리를 쓰면 매우 쉽게 컨텐츠를 추가하거나 제거할 수 있습니다.
이들 예제를 따라 해 보려면 브라우저에서 샘플 HTML을 불러온 다음 이들 예제를 콘솔에서 실행하는 것이 가장 좋은 방법입니다.
DOM을 수정하면 다른 예제가 실행되지 않을 수 있는데, 이럴 때는 파일을 다시 불러오면 됩니다.

제이쿼리에는 text와 html 메서드가 있습니다.
이들은 각각 요소의 textContent, innerHTML 프로퍼티에 대응합니다.
예를 들어 모든 문단의 텍스트를 똑같이 바꾸려면 다음과 같이 합니다.

$('p').text('ALL PARAGRAPHS REPLACED');

html 메서드를 쓰면 DOM을 수정할 수 있습니다.

$('p').html('<i>ALL</i> PARAGRAPHS REPLACED');

이 예제는 아주 단순하지만 제이쿼리의 중요한 특징을 잘 보여줍니다.
제이쿼리는 아주 쉽게 여러 요소를 동시에 수정할 수 있습니다.
DOM API로 같은 일을 하려면 document.querySelectorALL()이 반환하는 컬렉션을 순회하면서 작업해야 합니다.
제이쿼리는 기본적으로 제이쿼리 객체에 들어있는 모든 요소에 같은 작업을 하면서 루프 실행을 대신해 줍니다.
그런데 세 번째 문단 하나만 바꾸려면 어떻게 해야 할까요?
제이쿼리의 eq 메서드를 써서 요소 하나만 들어있는 새 제이쿼리 객체를 만들면 됩니다.

$('p')      // 모든 문단에 일치합니다.
    .eq(2)  // 세 번째 문단(인덱스는 0으로 시작합니다.)
    .html('<i>THIRD</i> PARAGRAPH REPLACED');

요소를 제거할 때는 제이쿼리 객체에서 remove를 호출합니다.
모든 문단을 제거한다면 다음과 같이 합니다.

$('p').remove();

이 예제에서는 제이쿼리를 사용할 때 중요한 개념인 체인(chaining)을 사용했습니다.
제이쿼리 메서드는 모두 제이쿼리 객체를 반환합니다.
따라서 반환된 객체에서 다시 메서드를 호출하는 식으로, 메서드를 체인으로 연결할 수 있습니다.
체인을 사용하면 아주 간단히 여러 요소를 조작할 수 있습니다.

제이쿼리에는 새 컨텐츠를 추가하는 메서드도 여러 가지가 있습니다.
먼저 append 메서드를 봅시다.
이 메서드는 제이쿼리 객체에 들어있는 모든 요소에 매개변수로 넘긴 컨텐츠를 이어붙입니다.
예를 들어 모든 문단에 각주 표시를 붙이고 싶다면 다음과 같이 간단하게 할 수 있습니다.

$('p').append('<sup>*</sup>');

append는 일치하는 요소에 자식을 추가합니다.
형제를 삽입할 때는 before와 after를 사용합니다.
다음은 모든 문단 앞뒤에 <hr> 요소를 추가하는 코드입니다.

$('p').after('<hr>').before('<hr>');

이들 삽입 메서드는 삽입할 ‘자리’에서 호출하지만, 반대로 삽입할 ‘요소’에서 호출하는 appendTo, insertBefore, insertAfter 메서드도 있습니다.
이들을 쓰는 게 알맞은 상황도 있습니다.
다음 예제를 보십시오.

$('<sup>*</sup>').appendTo('p');            // $('p).append('<sup>*</sup>')와 같습니다.
$('<hr>').insertBefore('p');                // $('p).before('<hr>')와 같습니다.
$('<hr>').insertAfter('p');                 // $('p).after('<hr>')와 같습니다.

제이쿼리에서는 요소의 스타일도 쉽게 바꿀 수 있습니다.
클래스를 추가할 때는 addClass, 클래스를 제거할 때는 removeClass를 사용합니다.
클래스를 토글하는 toggleClass 메서드도 있습니다.
이 메서드는 요소에 특정 클래스가 없으면 추가하고, 있으면 제거합니다.
css 메서드를 써서 스타일을 직접 수정할 수도 있습니다.
:even과 :odd 선택자를 써서 짝수 번째, 홀수 번째 요소를 선택할 수도 있습니다.
예를 들어 홀수 번째 문단을 모두 빨간색으로 바꾸려면 다음과 같이 합니다.

$('p:odd').css('color', 'red');

제이쿼리 체인을 사용하다 보면 이따금 이미 선택한 요소의 부분집합만 남겨야 할 때가 있습니다.
제이쿼리 객체를 요소 하나로 줄이는 eq는 이미 봤지만, 그 외에도 filter, not, find를 써서 선택 범위를 줄일 수 있습니다.
filter는 셋 요소 일치 선택자에 맞는 요소만 남도록 선택 범위를 줄입니다.
예를 들어 문단 전체를 수정한 다음, filter를 체인으로 연결해 홀수 번째 문단만 빨갛게 바꿀 수 있습니다.

$('p').after('<hr>').append('<sup>*</sup>').filter(':odd').css('color', 'red');

not은 filter의 반대입니다.
예를 들어 모든 문단 다음에 <hr>을 붙이고, highlight 클래스가 없는 문단을 모두 들여 쓰려면 다음과 같이 합니다.

$('p').after('<hr>').not('.highlight').css('margin-left', '20px');

마지막으로 find는 주어진 선택자에 일치하는 자손만 남깁니다.
filter가 현재 선택된 요소 전체에 필터를 적용하는 것과는 다릅니다.
예를 들어 모든 문단 앞에 <hr>을 붙인 다음, 클래스가 code인 자손 요소의 폰트 크기를 키우려면 다음과 같이 합니다.

$('p').before('<hr>').find('.code').css('font-size', '30px');

Related Posts