DOM 조작
이전에는 JavaScript 프레임워크를 사용하면 선택기와 DOM 탐색을 사용하여 특정 요소를 쉽게 얻을 수 있다는 것을 확인했습니다. 그러나 웹페이지의 특정 요소의 내용과 모양을 변경하려면 DOM을 조작하고 변경 사항을 적용해야 합니다. 순수한 JavaScript를 사용하는 것은 많은 작업이 될 것이지만 운 좋게도 대부분의 JavaScript 프레임워크는 이를 쉽게 수행할 수 있는 유용한 기능을 제공합니다.
ID가 the-box인 상자가 있다고 가정합니다.
<div id="the-box">여기에 메시지가 표시됩니다</div>
jQuery를 사용하여 텍스트를 "여기에 메시지가 표시됩니다"로 변경하면 다음과 같이 쉽게 사용할 수 있습니다.
$('#the-box').html('새 메시지입니다!');
실제로 함수에서 HTML 코드를 사용할 수 있으며 브라우저에서 구문 분석됩니다. 예를 들면 다음과 같습니다.
$('#the-box').html('<strong>새</strong> 메시지입니다!');
이 예에서 DIV 요소 내부의 콘텐츠는 다음과 같습니다.
<div id="the-box"><strong>새</strong> 메시지입니다!'</div>
물론, 이 예에서는 특수한 HTML 엔터티 코드를 지정하는 대신 보다 큼, 보다 작음 등의 특수 문자를 사용해야 합니다. 대신 jQuery의 텍스트 기능을 사용할 수 있습니다.
$('#the-box').text('300 >200');
div 요소를 업데이트한 후의 코드는 다음과 같습니다.
<div id="the-box">300 > 200</div>
위의 예에서는 기존 콘텐츠가 새 콘텐츠로 대체됩니다. 텍스트에 일부 정보를 추가하고 싶다면 어떻게 해야 할까요? 다행스럽게도 jQuery는 이러한 목적으로 추가 기능을 제공합니다.
$('#the-box').append(', 여기에 메시지가 표시됩니다');
원본 div에서 위 작업을 수행한 후 div 요소의 콘텐츠는 다음과 같습니다.
<div id="the-box">여기에 메시지가 표시됩니다. 여기에 메시지가 표시됩니다.</div>
추가하는 대신 콘텐츠를 기존 콘텐츠 뒤가 아닌 앞에 삽입하여 콘텐츠 앞에 추가할 수 있습니다. 또한 jQuery는 주어진 요소 내에서 앞이나 뒤에 콘텐츠를 삽입하는 기능을 제공합니다. 콘텐츠 교체, 콘텐츠 지우기, 요소 제거, 요소 복제 등의 기능도 있습니다.
DOM 조작 기능 외에도 JavaScript 프레임워크에는 일반적으로 요소의 스타일과 클래스를 조작하는 여러 기능이 포함되어 있습니다. 예를 들어, 마우스가 행 위로 지나갈 때 행을 강조 표시하는 테이블이 있습니다. 행에 동적으로 추가할 수 있는 hover라는 특수 클래스를 생성할 수 있습니다. YUI를 사용하면 다음 코드를 사용하여 행에 호버 클래스 이름이 있는지 확인할 수 있습니다. 있으면 무시됩니다.
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
마찬가지로 대부분의 JavaScript 프레임워크에는 CSS를 조작하기 위한 내장 함수가 있습니다.