728x90
반응형
[ 목차 ]
1. 문서 객체 모델 알아보기
2. DOM 요소에 접근하고 속성 가져오기
3. DOM에서 이벤트 처리하기
4. DOM에서 노드 추가, 삭제하기
1. 문서 객체 모델 알아보기
[ 문서 객체 모델이란 ]
- 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
- 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리함
ex) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체
[ DOM 트리 ]
- 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것
- 나무 형태가 되기 때문에 "DOM 트리" 라고 한다.
- 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목
- 루트 노트(root node) : DOM 트리의 시작 부분 (html)
[ DOM을 구성하는 원칙 ]
- 모든 HTML 태그는 요소(element) 노드
- 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text) 노드
- 태그의 속성은 요소 노드의 자식 노드인 속성(attribute) 노드
- 주석은 주석(comment) 노드
2. DOM 요소에 접근하고 속성 가져오기
[ DOM 요소에 접근하기 ]
- 웹 문서에서 원하는 요소를 찾아가는 것을 "접근한다(access)"라고 한다.
1) id 선택자로 접근하는 getElementById( ) 메서드
<기본형>
요소명.getElementById("id명")
2) class값으로 접근하는 getElementsByClassName( ) 메서드
- 반환 값이 2개 이상일 수 있다.
- HTMLCollection 객체에 저장된다.
<기본형>
요소명.getElementsByClassName("class명")
3) 태그 이름으로 접근하는 getElementsByTagName( ) 메서드
- 반환 값이 2개 이상일 수 있다.
- HTMLCollection 객체에 저장된다.
<기본형>
요소명.getElementsByTagName("태그명")
4) 다양한 방법으로 접근하는 querySelector( ), querySelectorAll( ) 메서드
<기본형>
노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)
- querySelector( ) 메서드는 한 개의 값만 반환
- querySelectorAll( ) 메서드는 반환 값이 여러 개일 때 모두 반환한다.
--> 노드 리스트로 저장된다.
- id 이름 앞에는 해시 기호(#), class 이름 앞에는 마침표(,), 태그는 기호 없이 태그명 사용
[ 웹 요소의 내용 수정하는 innerText, innerHTML 프로퍼티 ]
- 웹 요소의 내용을 수정하는 프로퍼티
- innerText : 텍스트 내용 지정
- innerHTML : HTML 태그까지 포함해서 텍스트 내용 지정
<기본형>
요소명.innerText = 내용
요소명.innerHTML = 내용//inner.html 코드
<!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;
// <div id="current"></div> 선택하는 것
}
function innhtml() {
document.getElementById("current").innerHTML = "<em>" + now + "</em>";
// <em> 태그는 강조된 텍스트(emphasized text)를 표현할 때 사용 -> 이텔릭체(기울임체)
}
</script>
</body>
</html>
[ 속성을 가져오거나 수정하는 getAttribute( ), setAttribute( ) 메서드 ]
- getAttribute( ) 메서드 : 속성 노드의 값을 가져옴
<기본형>
getAttribute("속성명")// getAttr.html 코드
<!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">판매가 : 20,000원</li>
<li>배송비 : 3,000원<br>(50,000원 이상 구매시 무료)</li>
<li>적립금 : 180원(2%)</li>
<li>로스팅 : 2023.01.11</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() {
// let cup = document.querySelector("#cup");
let cup = document.getElementById("cup"); // 이 코드는 위의 코드와 같은 결과를 출력해내는 코드이다.
alert("이미지 소스 : " + cup.getAttribute("src"));
}
// function displaySrc() {
// var cup = document.querySelector("#cup");
// alert("이미지 소스 : " + cup.getAttribute("src"));
// // 이미지를 한번 클릭하면 그 이미지의 소스를 보여주는 것
// }
</script>
</body>
</html>
- setAttribute( ) 메서드 : 속성 노드의 값을 바꿈
<기본형>
setAttribute("속성명", "값")
// setAttr.html 코드
<!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
반응형
'Language > JavaScript' 카테고리의 다른 글
| 06_제이쿼리 문서 객체 선택자와 조작법 (0) | 2023.01.12 |
|---|---|
| 05장(2)_ 문서 객체 모델(DOM) (0) | 2023.01.11 |
| 04장_자바스크립트와 객체 (0) | 2023.01.10 |
| 03장_ 함수와 이벤트 (0) | 2023.01.10 |
| 02장_ 자바스크립트 기본 문법 (0) | 2023.01.09 |
