1. DOM이란 무엇인가?
DOM의 정의와 역할
DOM은 HTML이나 XML 문서의 구조를 표현하는 방식으로, 문서의 요소들을 트리 구조로 표현합니다. 각 요소는 객체로 취급되며, 프로그래밍을 통해 접근하거나 수정할 수 있습니다. DOM은 웹 페이지의 구조와 데이터를 정의하며, 이를 기반으로 JavaScript나 jQuery를 사용해 동적인 웹 콘텐츠를 구현할 수 있습니다.
DOM 트리 예제
다음 HTML 코드는 DOM 트리를 형성합니다:
<!DOCTYPE html>
<html>
<head>
<title>예제 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 jQuery의 예제입니다.</p>
</body>
</html>DOM 트리 구조:
- html
- head
- title
- body
- h1
- p
- head
이 구조를 이해하면 각 요소를 프로그래밍적으로 조작할 수 있습니다.
2. jQuery를 사용한 DOM 조작 기초
jQuery는 선택자와 메소드를 통해 DOM을 쉽게 조작할 수 있게 합니다. 이를 통해 HTML 요소를 선택하거나 수정하고, 스타일을 추가하거나 이벤트를 처리할 수 있습니다.
2.1 선택자 사용하기
jQuery에서 $ 기호는 DOM 요소를 선택하는 데 사용됩니다. 선택자는 CSS 선택자와 유사한 방식으로 작성됩니다.
예제: 기본 선택자
$('p').css('color', 'blue'); // 모든 <p> 태그의 텍스트를 파란색으로 변경합니다.예제: 복합 선택자
$('div.container > p.highlight').css('font-weight', 'bold');위 코드는 container 클래스를 가진 <div> 내부의 highlight 클래스를 가진 모든 <p> 태그를 선택합니다.
2.2 메소드 활용하기
텍스트 변경
$('h1').text('반갑습니다!');HTML 추가
$('#myDiv').append('<p>새로운 단락을 추가했습니다.</p>');스타일 적용
$('.highlight').css('background-color', 'yellow');여러 스타일 적용
$('p').css({
'color': 'red',
'font-size': '18px',
'line-height': '1.5'
});3. 이벤트 처리와 함께하는 DOM 조작
jQuery는 사용자 상호작용을 처리할 수 있는 다양한 이벤트 메소드를 제공합니다. 예를 들어, 클릭, 마우스오버, 키 입력 등 다양한 상황에서 동작을 정의할 수 있습니다.
3.1 클릭 이벤트
예제: 버튼 클릭 시 숨기기
$('#toggleButton').click(function() {
$('#myText').toggle();
});3.2 마우스 이벤트
예제: 마우스오버로 스타일 변경
$('.hover-box').hover(
function() {
$(this).css('background-color', 'lightblue');
},
function() {
$(this).css('background-color', '');
}
);3.3 키보드 이벤트
예제: 실시간 입력 반영
$('#liveInput').on('input', function() {
$('#output').text($(this).val());
});4. DOM 탐색
jQuery는 DOM 요소 간의 관계를 쉽게 탐색할 수 있는 메소드를 제공합니다. 부모, 자식, 형제 요소를 다루는 데 유용합니다.
4.1 부모와 형제 탐색
예제: 부모 요소 탐색
$('.child').click(function() {
$(this).parent().css('background-color', 'yellow');
});예제: 형제 요소 스타일 변경
$('.child').siblings().css('color', 'red');4.2 요소 추가하기
예제: 조건부 요소 추가
if ($('#myList li').length < 5) {
$('#myList').append('<li>추가 항목</li>');
}5. 실습 예제
아래는 jQuery를 사용하여 다양한 DOM 조작을 구현하는 예제입니다.
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery와 DOM 조작 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="header">안녕하세요!</h1>
<button id="changeText">텍스트 바꾸기</button>
<p class="content">여기는 내용입니다.</p>
<script>
$(document).ready(function() {
$('#changeText').click(function() {
$('#header').text('환영합니다!');
$('.content').css('color', 'green');
alert('헤더가 변경되고 내용이 초록색으로 변했습니다.');
});
});
</script>
</body>
</html>6. 결론
jQuery는 복잡한 JavaScript 코드를 간결하게 만들어 주며, 특히 DOM 조작과 이벤트 처리를 효과적으로 할 수 있게 도와줍니다. 본 글에서 소개한 선택자, 메소드, 이벤트 처리 및 DOM 탐색 예제를 통해 웹 개발에서 jQuery를 활용하는 기본적인 방법을 익힐 수 있습니다.
추가적으로 현대적인 프레임워크(React, Vue.js)와 비교하며 jQuery의 강점을 탐구해보는 것도 좋은 방법입니다. 이를 통해 웹 개발 기술을 한 단계 더 발전시킬 수 있을 것입니다.
'프로그래밍 > Javascript' 카테고리의 다른 글
| jQuery 애니메이션: 동적 웹 인터페이스 만들기 (0) | 2025.02.16 |
|---|---|
| jQuery AJAX: 비동기 웹 개발의 완벽 가이드 (0) | 2025.02.16 |
| jQuery 기본 문법: 선택자, 메소드, 이벤트 처리 (0) | 2025.02.16 |
| jQuery 소개: 웹 개발의 필수 도구와 활용법 (0) | 2025.02.16 |
| 자바스크립트 데코레이터 완벽 가이드: 개념부터 실전까지 (0) | 2025.02.15 |