[Javascript] 8장. 웹 문서를 다루는 방법, 문서 객체 모델 (DOM) (3)

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

지금부터는 접근한 웹 요소의 속성 노드에 접근하는 법을 알아볼 것이다. 

선택한 상품의 이미지를 특정 위치에 표시하는 법을 실습하며 진행한다. 

 

 

getAttribute(), setAttribute()

이 두 함수는 HTML 태그의 속성을 가져오거나 수정하는 함수이다. 

위에서 말한 기능을 구현하기 위해서는 -

 

1) 작은 이미지의 src 속성에 접근해 그 값 알아내기 (querySelector, getAttribute)

2) 큰 이미지의 src 속성을 알아낸 값으로 변경하기  (getAttribute, setAttribute)

 

두 가지를 수행하면 된다. 

 

우선 이미지의 HTML 코드를 살펴보자.

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

여기에는 id값이나 class가 없기 때문에, img 태그를 이용해 접근해야 한다. 

이미지가 여러 개일 수 있기 때문에 우선 id="prod-img"에 먼저 접근한 뒤, 그 안에 있는 img 태그에 접근한다. 이렇게 접근하는 것은 "#prod-img > img" 를 통해 할 수 있다.

 

document.querySelector("#prod-img > img");

 

이미지 접근에 성공했다.

이제 이 이미지의 속성 값을 알아낸다. 이는 getAttribute() 함수를 통해 할 수 있다. 

document.querySelector("#prod-img > img").getAttribute("src");

이렇게 되면 이미지의 파일 경로가 콘솔 창에 표시된다. 

이 값을 넣으면 된다. 이 때 setAttribute 함수를 사용한다. setAttribute() 함수 안에 속성의 이름과 속성값을 넣어 주면 속성이 없는 경우 새로운 속성을 만들고, 속성이 이미 있는 경우에는 그 값이 변경된다. 

document.querySelector("#prod-img > img").setAttribute("src", "images/coffee-blue.jpg");

 

선택한 이미지 표시하기

	<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>

여기서 큰 이미지는 id 값이 cup이고, 작은 이미지는 class값이 small이므로 이를 이용하면 된다. 

우선 두 이미지의 속성 값을 받아준다. 그리고 소스를 아래와 같이 작성하면 이미지가 클릭에 따라 바뀐다. 

var bigImg = document.querySelector("#cup");
var smallImg = document.querySelectorAll(".small");

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

function showPic(){
    var temp = this.src;
    bigImg.setAttribute("src", temp);
}