DOM(Document Object Model, 문서 객체 모델)
DOM은 문서 객체 모델 이라는 뜻으로 HTML이나 XML 같은 문서의 요소(태그)들을 조작 가능하도록 객체화시킨 것입니다. DOM에 대한 자세한 개념은 하단의 링크를 참조합니다.
jQuery 에서의 DOM 탐색
jQuery는 DOM 요소를 쉽고 편리하게 접근할수 있도록 해줍니다. jQuery가 등장하기 이전에는 기본 자바스크립트 API를 통해서 DOM을 조작했는데, 함수명이 너무 길고 DOM 조작 함수들의 기능이 빈약했습니다.
jQuery는 CSS에서 사용하던 셀렉터(Selector, 선택자) 표현 방식으로 DOM 요소를 쉽고 간결하게 접근할 수 있게 해주고, 세밀하게 DOM 접근을 할 수 있도록 고급 필터 또한 제공합니다.
DOM에 접근한 이후로는 해당 DOM 요소를 원하는데로 다룰 수 있는 여러가지 함수 또한 제공하고 있습니다.
jQuery 셀렉터 사용
셀렉터는 다음과 같은 형식으로 사용합니다. 셀렉터 표현은 문자열로 표현합니다.
|
$(셀렉터 표현 문자열) |
cs |
$는 전역 객체인 windows.$ 으로 바인딩 되어 있으므로 어디서든 사용 가능합니다.
jQuery 라이브러리에 다음과 같은 형식으로 정의되어 있다고 생각하면 쉽게 이해할 수 있습니다.
|
window.$ = funtion(문자열){..} |
cs |
jQuery에서 DOM을 탐색하기 위한 셀렉터 사용 예제입니다.
|
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
var sel = $('*');
console.log(sel);
});
</script>
</head>
<body>
<h1>Dom</h1>
<p>Text</p>
</body>
</html> |
cs |
출력 결과입니다. html 뿐만 아니라 모든 요소를 셀렉터로 잡은것을 알 수 있습니다.
jQuery 셀렉터를 이용해 탐색하여 얻은 DOM 객체는 배열 형태로 나타냅니다.
$(document).ready() 함수는 브라우저가 HTML을 모두 해석하여 화면을 그리고 DOM 객체를 생성한 후 넘겨받은 콜백 함수를 실행하는 이벤트 함수입니다. 따라서 ready() 안에 정의된 함수의 코드는 DOM 객체가 생성 완료된 이후 실행됩니다.
|
<script>
$(document).ready(function() {
var sel = $('*');
console.log(sel);
});
</script> |
cs |
참고
실질적인 핵심 코드는 $('*') 입니다. 위 코드에서 $('*') 가 셀렉터이며, '*' 은 document 하위의 모든 DOM 요소를 뜻합니다. 따라서 모든 요소들을 jQuery 셀렉터로 잡은것입니다.
셀렉터 종류
다음의 샘플 HTML을 바탕으로 여러가지 셀렉터를 실습 해보도록 하겠습니다. DOM을 탐색한 이후 해당 요소의 CSS를 변경해 보면서 DOM 탐색에 사용되는 셀렉터를 알아봅니다.
|
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$('#menu').css('color', 'red');
});
</script>
</head>
<body>
<h1> 피콜로 서점 </h1>
<ul id="menu">
<li>1. 떠오르는 신작</li>
<li class="best">2. 베스트 셀러</li>
<li class="best">3. 스테디 셀러</li>
<li>4. 반값 할인</li>
<li>5. Q&A</li>
</ul>
</body>
</html> |
cs |
모든 요소 선택하기
모든 요소를 선택할 경우 * (애스터리스크) 를 사용합니다.
참고) css() 함수는 선택한 요소의 css 스타일을 속성과 값으로 변경하는 역할을 합니다.
|
$('*').css('color', 'skyblue'); |
cs |
모든 요소들의 color 스타일값이 하늘색으로 변경 되었습니다.
주의할 점은 document 하위의 모든 요소를 셀렉터로 잡기 때문에 html 태그, script 태그 등 모든 요소의 style 값이 변경 된다는 점 입니다.
특정 태그를 대상으로 선택하기
특정 태그를 대상으로 하는 경우 태그명을 그대로 쓰면 됩니다. ex) li, ul, div, a, input...
|
$('li').css('color', 'green'); |
cs |
셀렉터를 'li' 로 잡았고 <li> 태그들만 css가 적용되었습니다.
요소의 ID 값으로 선택하기
요소의 id 값을 이용하려면 #ID 와 같이 앞에 #을 붙여 사용합니다.
|
$('#menu').css('color', 'red'); |
cs |
요소의 클래스 값으로 선택하기
요소의 class 값을 이용하려면 .클래스명 와 같이 앞에 .을 붙여 사용합니다.
|
$('.best').css('color', '#ff0000'); |
cs |
클래스 값으로 best 를 가진 요소들을 빨간색으로 변경했습니다. 여기서 색상은 RGB 표기법을 사용했습니다.
여러개의 클래스 모두 속하는 요소 선택하기
만약 first 라는 클래스와 second라는 클래스 둘 다 가진 요소를 선택하려면 다음과 같이 클래스 선택자를 붙여서 사용합니다.
|
$('.first.second').css('color', '#ff0000'); |
cs |
혼합하여 선택하기
예를들어 태그 선택자와 클래스 선택자를 통해 best 클래스에 속하는 li 태그를 선택할 수 있습니다.
|
$('li.best').css('color', '#ff0000'); |
cs |
여러 개의 셀렉터로 한꺼번에 선택하기
만약 특정한 행동을 한꺼번에 처리하고 싶은데 한번에 선택할 수 없는 경우에는 여러가지 셀렉터를 , (콤마) 로 구분하여 한꺼번에 선택할 수 있습니다.
|
$('h1, .best').css('color', '#ff0000'); |
cs |
h1 태그와 클래스 값으로 best 를 가진 요소를 한꺼번에 선택합니다.
다음글
'JavaScript' 카테고리의 다른 글
| [jQuery] jQuery 선택자(Selector) 목록 정리 (0) | 2018.06.23 |
|---|---|
| [jQuery] jQuery DOM 계층 구조를 활용한 셀렉터(Selector) 사용법 (0) | 2018.06.22 |
| [jQuery] $(document).ready() 메서드를 알아보아요. (3) | 2018.06.12 |
| [jQuery] jQuery $ 식별자 중복으로 충돌 방지하기 (0) | 2018.06.11 |
| [자바스크립트] 데이터 속성(data-xxx)에 대해 (1) | 2018.06.09 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그