13. 문서 객체 모델 (1) 기본 개념

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

코드 그라데이션

13. 문서 객체 모델 (1) 기본 개념 본문

Front/Mega-JavaScript

13. 문서 객체 모델 (1) 기본 개념

완벽한 장면 2023. 5. 23. 20:11

문서 객체 모델의 개념

웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것.
이렇게 반응하게 하려면 웹 문 서 의 모든 요소를 따로 제어할 수 있어야 한다.
이 때 필요한 개념인데
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

DOM 트리

부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.
노드(node) : 트리에서 가지가 갈라져 나간 항목
루트 노드 : DOM 트리 의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 붙인 이름
루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다
따라서 각 노드 사이의 관계를 부모, 자식, 형제 간으로 나누어 부른다.

DOM의 구성 기본 원칙

모든 HTML 태그는 요소(element) 노드이다.
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드이다.
HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다.
주석은 주석(comment) 노드이다.

DOM 요소에 접근하고 속성 가져오기

웹 문서에서 원하는 요소를 찾아가는 것을 ‘접근한다’고 한다.

DOM에 접근하기

- 선택자를 사용해서 DOM에 접근하는 방법

1) id 선택자로 접근하는 getElementByld() 메서드

HTML 태그의 id 속성은 HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자.
getElementByld() 메서드를 이용하면 특정한 id가 포함된 DOM 요소에 접근할 수 있다.

ex. id값이 heading인 요소에 접근하기

document.getElementById("heading")

2) class 값으로 접근하는 getElementByClassName() 메서드

지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근한다.
class 선택자는 웹 문서 안의 여러 요소에서 사용할 수 있으므로, 이 메서드를 사용하면 반환하는 요소가 여러 개일 수 있다.
그래서 Elements 인 것.

ex. class 선택자로 DOM 요소에 접근하기

document.getElementsByClassName("bright")

아 메서드를 사용하게 되면 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장된다.
HTMLCollection 객체는 배열과 비슷하고 배열처럼 사용할 수 있다. 하지만 배열은 아니다.

3) 태그 이름으로 접근하는 getElementsByTagName() 메서드

class나 id를 지정하지 않은 DOM 요소에 접근하려면 태그를 이용.
지정한 태그명을 사용한 DOM 요소에 접근할수 있다.

ex. 태그로 DOM 요소에 접근하기

document.getElementsByTagName("p")

4) 다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드

앞서 살펴본 1)~3) 의 반환값은 HTMLCollection 객체이다.
여기는 HTML 요소만 저장된다.
DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 querySelector(), querySelector All() 메서드를 사용해야

id 선택자처럼 반환값이 하나라면 querySelector() 메서드를 사용하고,
class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우에는 querySelectorAll() 메서드를 사용.

querySelector("#heading") // id="heading"인 요소
querySelectorAU(".bright") // class="bright"인 요소

querySelector(), querySelectorAll() 메서드에서 선택자를 표시할 때 id 이름 앞에는 해시 기호(#)를 붙이고
class 이름 앞에는 마침표(.)를 붙인다.
태그는 기호 없이 태그명만 쓰면 된다.
querySelector() 메서드에서 class 이름으로 접근할 때는 class 이름을 사용한 여러 요소 중에 서 첫 번째 요소만 반환한다.

querySelector(), querySelectorAll() 메서드의 반환값은 노드이거나 노드 리스트
노드 리스트는 노드를 한꺼번에 여러개 저장한 것으로 배열과 비슷하다

5) 웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

자바스크립트에서는 웹 요소의 내용도 수정할 수 있습니다.
가장 쉬운 방법은 innerText 프로퍼티나 innerHTML 프로퍼티를 이용하는 것.
innerText 프로퍼티는 텍스트 내용을 표시하고 innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시한다.

예제

- 날짜와 시간을 그대 로 innerText 프로퍼티로 표시할 때와

innerHTML 프로퍼티로 <em> 태그와 같이 표시할 때 어떤 차이가 있는지 살펴보기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<button onclick="inntext()">innerText로 표시하기</button>
	<button onclick="innhtml()">innerHTML로 표시하기</button>
	<h1>현재 시각: </h1>
	<div id="current"></div>
	
	<script>
		var now = new Date();

		function inntext(){
			document.getElementById("current").innerText = now;
		}
		function innhtml() {
			document.getElementById("current").innerHTML = "<em>" + now + "</em>";
		}
	</script>
</body>
</html>

실행 결과

5) 속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다.
이때 속성에 접근하려면 getAttributeO 메서드를 사용하고, 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용.

setAttribute() 메서드를 사용하면 원하는 속성값으로 지정할 수 있다.
속성값이 이미 있 다면 새로운 속성값으로 수정하고，아직 해당 속성이 없다면 속성과 속성값을 새로 추가한다.

예제 - 큰 이미지를 클릭하면 그 이미지 의 경로 속성을 가져와 알림 창에 표시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM</title>
	<link rel="stylesheet" href="css/product.css">
</head>
<body>
	<div id="container">
			<h1 id="heading">에디오피아 게뎁</h1>
			<div id="prod-pic">
				<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200" onclick="displaySrc()">
					<div id="small-pic"> 
						<img src="images/coffee-pink.jpg" class="small">
						<img src="images/coffee-blue.jpg" class="small">
						<img src="images/coffee-gray.jpg" class="small">
					</div>
			</div>			
			<div id="desc">
				<ul>
					<li>상품명 : 에디오피아 게뎁</li>
					<li class="bluetext">판매가 : 9,000원</li>
					<li>배송비 : 3,000원<br>(50,000원 이상 구매시 무료)</li>
					<li>적립금 : 180원(2%)</li>
					<li>로스팅 : 2019.06.17</li>
					<button>장바구니 담기</button>
				</ul>				
				<a href="#" id="view">상세 설명 보기</a>				
			</div>
			
			<div id="detail">									
					<hr>
					<h2>상품 상세 정보</h2>
					<ul>
						<li>원산지 : 에디오피아</li>
						<li>지 역 : 이르가체프 코체레</li>
						<li>농 장 : 게뎁</li>
						<li>고 도 : 1,950 ~ 2,000 m</li>
						<li>품 종 : 지역 토착종</li>
						<li>가공법 : 워시드</li>
					</ul>
					<h3>Information</h3>
					<p>2차 세계대전 이후 설립된 게뎁농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
					<h3>Flavor Note</h3>
					<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
			</div>
	</div>

	<script>
		function displaySrc() {
			var cup = document.querySelector("#cup");
			alert("이미지 소스 : " + cup.getAttribute("src"));
		}	
	</script>
</body>
</html>

실행 결과

예제 2 - 작은 이미지를 클릭했을 때 위의 큰 이미지 자리에 표시되도록

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM</title>
	<link rel="stylesheet" href="css/product.css">
</head>
<body>
	<div id="container">
			<h1 id="heading">에디오피아 게뎁</h1>
			<div id="prod-pic">
				<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
					<div id="small-pic"> 
						<img src="images/coffee-pink.jpg" class="small">
						<img src="images/coffee-blue.jpg" class="small">
						<img src="images/coffee-gray.jpg" class="small">
					</div>
			</div>			
			<div id="desc">
				<ul>
					<li>상품명 : 에디오피아 게뎁</li>
					<li class="bluetext">판매가 : 9,000원</li>
					<li>배송비 : 3,000원<br>(50,000원 이상 구매시 무료)</li>
					<li>적립금 : 180원(2%)</li>
					<li>로스팅 : 2019.06.17</li>
					<button>장바구니 담기</button>
				</ul>				
				<a href="#" id="view">상세 설명 보기</a>				
			</div>
			
			<div id="detail">									
					<hr>
					<h2>상품 상세 정보</h2>
					<ul>
						<li>원산지 : 에디오피아</li>
						<li>지 역 : 이르가체프 코체레</li>
						<li>농 장 : 게뎁</li>
						<li>고 도 : 1,950 ~ 2,000 m</li>
						<li>품 종 : 지역 토착종</li>
						<li>가공법 : 워시드</li>
					</ul>
					<h3>Information</h3>
					<p>2차 세계대전 이후 설립된 게뎁농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
					<h3>Flavor Note</h3>
					<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
			</div>
	</div>

	<script>
		var cup = document.querySelector("#cup");
    var smallPics = document.querySelectorAll(".small");
      
    for(let i = 0; i < smallPics.length; i++) {
      smallPics[i].addEventListener("click", changePic);
    }

    function changePic() {
      var newPic = this.src;
      cup.setAttribute("src", newPic);
    }			
	</script>
</body>
</html>

실행 결과

728x90

'Front > Mega-JavaScript' 카테고리의 다른 글

15. 문서 객체 모델 (3) DOM에 노드 추가/삭제하기 (0)	2023.05.24
14. 문서 객체 모델 (2) DOM에서 이벤트 처리하기 (0)	2023.05.24
12. 자바스크립트와 객체 (2) 브라우저와 관련된 객체 (0)	2023.05.21
11. 자바스크립트와 객체 (1) 객체의 의미와 내장 객체 (0)	2023.05.21
10. 함수와 이벤트 (4) 이벤트 처리기 관련 (0)	2023.05.21