JavaScript-DOM(문서 객체 모델) 1-실습

드디어 제가 예제를 가져왔습니다. 이번에는 DOM(1)에서 배운 것을 바탕으로 몇 가지만 실습을 해보겠습니다.

JavaScript-DOM(문서 객체 모델) 요소에 접근하기(1)

↑ 아직 DOM(1)을 보지 않았다면 요기로! ↑

---

↓ 실습 파일은 요기! ↓

example.zip

0.08MB

---

id 선택자로 접근하기 - getElementById() 함수

id 선택자를 사용하여 heading에 접근해서 "카미유 피사로"를 누르면(onclick) 색이 변하는 함수가 작동하도록 해보겠습니다.

 

document.getElementById("heading").onclick = function() {
    this.style.color = "red"
}

이렇게 적어주고 "카미유 피사로" 글자를 클릭하면 글자의 색이 변합니다.

---

id, class, 태그 이름 중 하나로 접근하기 - querySelector() 함수

이번에는 heading에 접근해서 글자 바탕색을 바꿔보겠습니다.

 

document.querySelector("#heading").style.backgroundColor="yellow"

 

이렇게 적어주면 글자 바탕색이 변하는 것을 확인할 수 있습니다. querySelector() 함수를 사용할 때 class 앞에는 마침표(.), id 앞에는 샵(#), 태그 이름은 기호 없이 사용하면 됩니다.

---

태그 속성 가져와서 수정하기

 

 

이번에는 밑에 작은 이미지를 클릭하면 해당 이미지가 크게 나타나게 만들어보겠습니다.

방법은
1) 큰 이미지에 접근한다.
2) 작은 이미지에 접근한다.
3) 클릭하면 작은 이미지를 크게 나타나게 해주는 함수를 실행한다.
함수 만들기
(1) 작은 이미지의 src속성에 접근해서 값을 알아낸다.
(2) 큰 이미지의 src 속성을 (1)에서 알아낸 값으로 변경한다.

작은 사진들의 class 값이 전부 "small"입니다.

var bigPic = document.querySelector("#big"); //id 선택자로 큰 이미지를 가져온다.
var smallPic = document.querySelectorAll(".small"); //class 선택자로 작은 이미지를 가져온다.

for(let i=0; i<smallPic.length; i++){ //노드 리스트(class)의 각 요소에 접근한다.
    smallPic[i].onclick = change; // 요소를 누르면 change() 함수를 실행한다.
}

function change() {
    var clickPic = this.src; //click 이벤트가 발생한 대상의 src 속성 값을 가져온다.
    bigPic.setAttribute("src",clickPic); //가져온 속성 값을 큰 이미지의 src속성에 할당한다.
}

이렇게 코드를 작성하면 완성입니다.

---

요소의 스타일(CSS 속성) 가져와서 수정하기

 

 

이번에는 상세 정보 보기를 누르면 상세 설명이 나오도록 만들어보겠습니다.

 

 

 

 

상세 설명 보기의 id 값은 "view"이고 상세 정보의 id 값은 "detail"입니다.
이제 "#view" 요소를 누르면 "#detail" 요소가 나타나도록 자바스크립트 소스를 만들어보겠습니다.

 

 

var view = document.querySelector("#view"); //id="view"인 요소를 가져온다.
view.addEventListener("click", function() { //click 이벤트 발생하면 함수를 실행한다.
    document.querySelector("#detail").style.visibility = "visible"; //detail 요소의 visibility 속성 값을 "visible"로 지정한다.
})

이렇게 코드를 작성하면 됩니다.

열어서 보기도 만들었으니 닫기도 만들어봅시다!

detail이 열려있으면 "상세 정보 닫기"가 되고 정보가 보이게 만들고
detail이 닫혀있으면 "상세 정보 보기"가 되고 정보가 감춰지게 만들겠습니다.

그러기 위해서는 닫힘, 열림을 알 수 있어야 하기 때문에 if문을 사용하겠습니다.

var view = document.querySelector("#view"); //id="view"인 요소를 가져온다.
var isOpen = false;
view.addEventListener("click", function() { //click 이벤트 발생하면 함수를 실행한다.
    if (isOpen == false) { //상세 정보 보기가 닫혀있으면
        document.querySelector("#detail").style.visibility = "visible"; //detail 요소의 visibility 속성 값을 "visible"로 지정한다.
        view.innerText = "상세 정보 닫기";
        isOpen = true; //상세 정보를 열려있음으로 바꾼다.
    }
    else {
        document.querySelector("#detail").style.visibility = "hidden"; //detail 요소의 visibility 속성 값을 "hidden"로 지정한다.
        view.innerText = "상세 정보 보기";
        isOpen = false; //상세 정보를 닫혀있음으로 바꾼다.
    }
})

코드를 이렇게 수정해주면 진짜 완성!!

짜란~

---

도슐랭스타
★★★☆☆ : 역시 실제로 해보는 게 재미있다!
왜 카미유 피사로로 했나?! 우연히 카미유 피사로의 풍경화를 봤는데 너무 편-안, 아-늑한 느낌이라서 좋았다!!