08-1. 문서 객체 모델이란?
DOM은 앞서 6장에서 객체를 다루며 설명한 적이 있다. (6장 링크)
DOM (문서 객체 모델, Document Object Model) 은 자바스크립트를 이용해 웹 문서를 제어하기 위해 사용되는 내장 객체를 말한다.
문서 객체 모델의 정의
DOM은 Document Object Mode의 준말로 돔이라고 읽는다.
문서 객체 모델을 DOM이라고 표기한다.
DOM이란?
웹 문서의 모든 요소를 자바스크립트를 이용해 제어할 수 있도록 객체를 사용해 문서를 해석하는 방법
EX) 웹 문서의 텍스트, 이미지, 표 등은 모두 문서 객체 모델에 해당한다.
이게 무슨 말일까?
DOM을 이용하지 않고 상세 설명 가리기
<body>
<div id="detail">
<h2>상품 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>상세 설명</h3>
<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피
품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3>커피의 풍미</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</body>여기서 상세 설명을 가리고자 한다.
DOM을 사용할 때는 다음과 같이 작성한다.
<style = "visibility: hidden">
<body>
<div id="detail">
<h2>상품 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3 style="visibility: hidden">상세 설명</h3>
<p style="visibility: hidden">2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피
품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3>커피의 풍미</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
매번 이렇게 작성하는 데에는 한계가 있다. 따라서 DOM을 이용하는 방법을 알아보도록 하자.
또한 버튼을 눌렀을 때 설명을 가리는 등, 이 문서를 자바스크립트를 이용해 제어하기 위해서는 DOM을 사용해야 한다.
DOM을 사용하여 상세 설명 가리기
document.querySelector('#detail h3').style.visibility = 'hidden';
'hidden'
document.querySelector('#detail p').style.visibility = 'hidden';
'hidden'콘솔 창에 이를 입력함으로써 두 부분 h3과 p를 모두 없앨 수 있다.
이것은 document라는 DOM 객체에 문서의 정보가 모두 저장되어 있기 때문에 가능하다.
DOM 트리 - DOM 구조는 나무처럼 생겼다.
<body>
<h1>제목</h1>
<p>본문</p>
</body>이 때, DOM은 이를 트리처럼 인식한다.
부모 노드 - body
자식 노드 - 제목, 본문 (h1, p)
DOM 트리 (tree) 에서는 그 자식들이 품고 있는 텍스트, 이미지 또한 자식들로 간주한다.
- 요소(element) : 웹 문서의 태그
- 그 자식인 text : 해당 요소에 속한 텍스트
- 그 자식인 attribute 속성 : 태그의 속성을 모두 포함
- 주석 (comment) : 주석
DOM 트리 자세히 살펴보기
실시간으로 DOM 트리가 만들어지는 것을 볼 수 있는 사이트가 있다.
(Live DOM viewer)
software.hixie.ch/utilities/js/live-dom-viewer/
Live DOM Viewer
Live DOM Viewer ... Script not loaded. This script puts a function w(s) into the global scope of the test page, where s is a string or object to output to the log. Some files are available for testing purposes, notably "image" is an image. image and image.
software.hixie.ch
- HTML 작성하는 공간
- 해당 DOM tree를 보여주는 공간
- 결과값을 출력하는 공간
위에서 입력한 HTML스크립트를 입력해본 결과는 다음과 같다,
태그 요소는 보라색으로, 텍스트 노드는 #text 옆에 표시된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>DOM TREE 알아보기</title>
</head>
<body>
<h1>DOM</hl>
<p>DOM을 공부합시다.</p>
</body>
</html>DOM viewer로 확인한 tree는 다음과 같다.
이제 이 DOM 트리의 요소에 접근하는 법을 알아보자.
08-2. DOM 요소에 접근하기
이 장에서는 DOM 요소에 접근하는 방법에 대해 다룬다.
CSS 선택자 (selector) : HTML의 스타일을 선택, 수정할 때 CSS 요소를 사용한다. DOM 요소에 접근할 떄도 이를 활용한다.
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-img">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
</div>
<div id="desc">
<h2 class="bright">Information</h2>
<p>2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 <span class="accent">SCAA 인증</span>을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
<h2>Flavor Note</h2>
<p class="bright">은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
</body>
1. getElementById()
id 속성 값을 이용해 element에 접근하는 방식이다. 위 예시에서, h1 요소에 접근하고자 한다고 생각해 보자.
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
getElementById() 함수를 이용해 해당 ID의 값을 불러올 수 있다. 콘솔창에서 실행한 결과는 다음과 같다.
화면에서는 이렇게 h1 부분이 표시된다.
이렇게 접근한 요소의 스타일을 바꿀 수 있다.
document.getElementById("heading").onclick = function() {
this.style.fontSize = "5em";
}클릭하면 heading 부분의 글자가 커지는 것을 확인할 수 있다.
id는 문서 내에서 유일하므로 한 번만 사용할 수 있다.
2. getElementsByClassName()
DOM 요소를 Class 값으로 찾아내는 함수이다.
이 함수의 이름에는 Elements가 들어감에 유의한다. class 선택자는 1번과 달리 여러 번 사용할 수 있고, 따라서 2개 이상의 웹 요소에 접근하므로 Elements로 표시한다.
<p>2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은 유기농 인증 농장으로~
<span class="accent">SCAA 인증</span>을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>둘 모두 class가 accent이므로 둘 모두를 호출할 수 있다.
이것은 HTMLCollection이라는 배열에 저장된 것과 동일하므로, 배열의 인덱스를 사용해 원하는 요소에 접근할 수 있다.
이 요소에 밑줄을 표시하는 코드는 다음과 같다.
document.getElementsByClassName("accent")[0].style.textDecoration = "underline";
'underline'
해당하는 게뎁농장 부분에 밑줄이 생긴 것을 확인할 수 있다.
밑줄 = style.textDecoration = "underline";
3. getElementsByTagName()
이 함수는 Tag의 이름으로 요소에 접근하는 함수이다.
id, class 선택자가 없는 요소도 존재한다. 따라서 이런 경우에는 tag를 이용해서 접근할 수 있다.
이 함수도 여러 개의 요소에 한꺼번에 접근한다. (Elements)
<h2 class="bright">Information</h2>여기 접근해 보자.
document.getElementsByTagName("h2");이렇게 접근하면 다음과 같이 콘솔에 출력된다.
이제 배경색을 바꾸어 보자. 다음과 같이 입력해 배경색을 바꿀 수 있다.
document.getElementsByTagName("h2")[0].style.backgroundColor = "#eee";
'#eee'
배경색이 바뀌었다.
4. querySelector(), querySelectorAll();
이 두 함수는 접근하는 HTML 요소를 제외하고 사용법이 동일하다.
id, class 값을 사용해도 되고, 태그 이름을 사용해도 된다.
-class 값 앞: .
-id 값 앞: #
-tag 값 앞 :
앞에 기호를 알맞게 붙여 주어야 한다.
두 방식을 사용했을 때 #의 유무에 유의한다.
ID는 값이 하나이므로 querySelector를 사용했다면, class의 경우 값이 여러 개이므로 querySelectorAll을 사용해야 한다.
*querySelector함수는 텍스트, 속성 노드까지 모두 접근할 수 있는 반면, getElement~ 함수는 웹 요소에만 접근할 수 있다.
'스스로 공부하기 > Javascript' 카테고리의 다른 글
| [Javascript] 8장. 웹 문서를 다루는 방법, 문서 객체 모델 (DOM) (3) (0) | 2022.11.30 |
|---|---|
| [Javascript] 7장. 배열을 쉽게 다루자! Array 객체 (3) (1) | 2022.11.26 |
| [Javascript] 7장. 배열을 쉽게 다루자! Array 객체 (1, 2) (0) | 2022.11.23 |
| [Javascript] 6장. 여러 자료를 한꺼번에 담는 객체 (0) | 2022.11.11 |