문서 객체 모델(DOM)이란?

1. 문서 객체 모델
2. DOM 요소에 접근하는 여러가지 방법
3. 웹 요소의 속성 가져와서 수정하기

 

1. 문서 객체 모델(DOM,Document Object Model) 

문서 객체 모델 정의

: 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.

 

즉, DOM을 이용하면, 웹 문서의 모든 요소(텍스트,이미지,표 등)를 객체로 해석할 수 있다.

 

DOM 사용 여부에 따라, h3 내용 가리기 예시

 

 

예를 들어, HTML로 작성한 다음과 같은 정보에서, '상세설명'을 보이지 않게 하려고 한다.

 

1) DOM을 사용하지 않고 내용을 가리려면

...
<h3> 상세 설명 </h3>
<p> 2차 세계대전 이후 ~~~ ~~~</p>
...

웹 문서를 비쥬얼 스튜디오 코드로 열어 상세 설명이 가려지도록 CSS를 작성하면 된다. 아래와 같이 말이다.

<h3 style="visibility:hidden">상세설명</h3>
<p style="visibility:hidden">2차 세계대전 이후 ~~~ ~~</p>

-> but, 일일히 이렇게 vs코드로 웹 문서를 수정하는 것은 매우 번거로운 작업이다.

 

2) DOM을 사용하여 내용을 가리려면

 

자바스크립트로 DOM을 제어함으로써, 위의 단점을 해결할 수 있다.

 

...
<h3> 상세 설명 </h3>
<p> 2차 세계대전 이후 ~~~ ~~~</p>
...

위의 소스코드를 건들이는 대신, 

아래 코드를 작성한다.

document.querySelector('#detail h3').style.visibility = 'hidden'

document.querySelector('#detail p').style.visibility = 'hidden'

-> 1)과 같은 결과가 나온다.

 

정리하면, 1)은 웹 문서를 직접 수정하는 방식이고 , 2)는 웹 문서를 직접 수정하는 대신 자바스크립트로 웹 문서를 수정하였다.

=> document가 웹 문서 자체를 가리키는 DOM요소 중 하나이기 때문에 가능한 것. 

 

 

 

2. DOM 요소에 접근하는 여러가지 방법

앞에서, 상세 설명을 보이지 않게 한 예시처럼, 웹 문서의 요소를 보이지 않게 하려면

=> 자바스크립트로 어떤 DOM 요소를 감춰야 하는지 알아야 한다.

이렇게, 자바스크립트로 프로그램에 사용할 요소에 접근하는 것을 'DOM요소에 접근한다'고 한다.

 

DOM요소에 접근하는 방법은 여러가지가 있다.

 

1) DOM 요소를 id 선택자로 접근하는 함수 -- getElementById()

 

예를 들어,

<h1 id="heading"> 에티오피아 게뎁 </h1>

와 같이, id속성이 적용된 제목(h1)에 접근하려면, 어떻게 해야할까?

 

document.getElementById("heading") //제목 요소에 접근

을 입력한다.

 

접근한 요소에 텍스트가 있다면, 자바스크립트를 사용해 글자 색이나 크기 등 스타일을 수정할 수도 있다. 

예를 들어, 위에서 접근한 제목의 스타일을 바꾸어보자.

 

제목을 누르면, 접근한 요소의 글자 크기가 커지도록하려면, 어떻게 해야할까?

document.getElementById("heading").onclick=function() {
	this.style.fontSize = "5em"
}

 

 

2) DOM 요소를 class 값으로 찾아내는 함수 -- getElementsByClassName()

 

** getElementsByClassName -> s가 붙음을 주의

<p> 2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은...<span class="accent">SCAA
인증</span>을 받은 ...스페셜티커피를 생산합니다.</p>

 

CSS에서 class선택자는 id선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있다.

따라서, getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근한다. 

 

만약, class속성이 적용된 부분에 접근하려면 어떻게 해야할까?

document.getElementByClassName("accent")

 

위 코드를 통해, accent가 적용된 두 개의 DOM요소를 getElementsByClassName() 함수로 접근할 수 있다.

 

만약, 이렇게 접근한 DOM요소 중 1개의 요소에만 접근하고 싶으면 어떻게 해야할까? 

-> '배열의 인덱스'를 사용해서 원하는 요소에 접근할 수 있다.

document.getElementByClassName("accent")[0]
//<span class="accent">게뎁농장</span>

 

위 요소에 밑줄을 표시하려면 어떻게 해야할까?

document.getElementsByClassName("accent")[0].style.textDecoration="underline"

 

 

3) DOM 요소를 태그 이름으로 찾아내는 함수 -- getElementsByTagName()

 

id나 class 선택자가 없는 DOM요소에는 어떻게 접근할까?

-> getElementsByTagName() 함수를 사용하여 태그 이름을 찾아 DOM요소에 접근한다.

 

예를 들어,

<div id="desc">
	<h2>Information</h2>
	<p>2차 세계대전 이후 .... 생산합니다</p>
	<h2>Flavor Note</h2>
	<p>은은하고....향이 입안 가득..</p>
</div>

위와 같은 코드가 있을 때, h2는 두 개가 있다. 이 중, information 제목에만 배경색을 넣고 싶다면, 어떻게 해야할 까?

document.getElementsByTagName("h2")[0].style.backgroundColor = "#eee"

 

4) DOM 요소를 다양한 방법으로 찾아주는 함수 -- querySelector(), querySelectorAll()

 

querySelector() 와 querySelectorAll() 함수는, id,class 값을 사용해도 되고 태그 이름을 사용해도 된다.

두 함수는 접근하는 DOM 요소 개수에만 차이가 있을 뿐 사용 방법은 같다.

 

• id: id 값 앞에는 샾(#)을 붙인다.

예를 들어, id 값의 container (<h1 id="container">)에 접근하려고 하면

     document.getElementById("container") 을 사용하거나,

     document.querySelector("#container") 을 사용한다.

 

• class 값 앞에는 마침표(.)를 붙인다.

예를 들어, class 값의 accent(<span class="accent">)에 접근하려고 하면

     document.getElementsByClassName("accent") 을 사용하거나,

     document.querySelectorAll("#accent") 을 사용한다.

class는 여러번 사용될 수 있으므로, accent가 여러개일 경우, 마찬가지로 인덱스 번호로 접근한다.

 

• 태그 이름은 기호 없이 태그 이름만 사용한다.

3. 웹 요소의 태그 속성 가져와서 수정하기

 

getAttribute() - HTML 태그 속성을 가져오는 함수

setAttribute() - HTML 태그 속성을 수정하는 함수

 

작은 이미지중 한 이미지를 클릭하면, 위에 큰 이미지로 클릭한 이미지가 보여지도록 해보자

=> 1) 작은 이미지의 src 속성에 접근해서 값을 알아낸다.

     2) 큰 이미지의 src 속성에 접근해서 작은 이미지의 src 값으로 변경한다.

 

=> 이미지 요소에 접근하는 것 : querySelecter() 함수 사용

     속성에 접근하는 것 : getAttribute() 함수 사용

     속성을 바꾸는 것: setAttribute() 함수 사용

 

예를 들어, 이런 코드가 있다고 가정하자.

<div id= "prod-img">
	<img src="imges/coffee-pink.jpg" alt= "에디오피아 게뎁">
</div>

 위 코드가 나타내는 이미지의 속성값을 얻고싶다. 어떻게 해야할까?

 

    : 이미지에 id나 class를 사용하지 않았기 때문에, <img>태그를 사용해서 접근해야 한다. 

     웹 문서 안에 이미지가 여러개일 수 있으므로, #prod-img > img 선택자를 사용해서 접근한다.

document.querySelector("#prod-img > img").getAttribute("src")
// 결과는,"imges/coffee-pink.jpg"

  위 코드가 나타내는 이미지를, 다른 이미지로 바꾸고싶다면?

document.querySelector("#prod-img > img").setAttribute("src","바꾸고자 하는 이미지 파일의 경로")

 

작은 이미지를 눌렀을 때, 큰 이미지로 표시되도록 하는  코드를 작성해보자.

1) 큰 이미지와 작은 이미지를 가져와서, 각각 변수에 저장해놓는다

var bigPic = document.querySelector("#cup"); //큰 이미지 가져옴
var smallPic = document.querySelector(".small") //작은 이미지 가져옴 (노드리스트)

2) 작은 이미지에서 click이벤트가 발생했을 때 showBig()함수를 실행하도록 소스 작성해본다.

 

 

var bigPic = document.querySelector("#cup"); //큰 이미지 가져옴
var smallPic = document.querySelector(".small") //작은 이미지 가져옴 (노드리스트)

for(var i=0; i<smallPics.length; i++){
	smallPics[i].onclick = showBig;
}

3) showBig 함수 만들기 

 : showBig함수는 작은 이미지를 눌렀을 때 실행할 함수. 따라서, 작은 이미지 중 어떤 이미지를 눌렀는지 알아야 한다.

function showBigi(){
	var newPic = this.src; // click이벤트가 발생한 대상의 src속성 값 가져옴
    bigPic.setAttribute("scr",newPic); //newPic 값을 큰 이미지의 src속성에 할당
}
//예약어 this는, click이벤트가 발생한 요소. 즉, 누른 이미지를 가리킨다.