JS에서 HTML 요소 접근

07 Nov 2020 in Programming on JavaScript

◇ JS 실습 포스팅 시리즈 ◇

1. 입력 데이터 출력 실습
2. n초 마다 사진 바꾸기
3. 버튼위에 마우스 올려 사진 바꾸기
4. 버튼위에 마우스 올려 사진 바꾸기2 - 현재 글
5. 자식창에서 부모창 정보 수정 하기
6. 야식 주문 프로그램 만들기

---

• 지난 시간에는 HTML 요소에서 이벤트 속성을 추가해 JS에서 요소에 접근했다. 아래에 있는 저번 시간에 공부한 코드를 보면 태그 안에 onmouseover 이라는 키워드가 있다.

  <a href="#" data-img="dog1.jpg" onmouseover="replace(this);">갱얼쥐1</a>
  

  사실 위 같은 코드는 별로 좋은 코드는 아니다. html과 js가 섞여있기 때문이다. 이번 시간에는 html과 js를 분리해 이벤트를 처리하는 법을 정리할 것이다.

JS에서 버튼 하나에 event 걸기

화면이 다음과 같이 구성되어 있다.

1. 사진이 들어간 곳 : id= target

   <img id="target" src="dog4.jpg" alt="이미지">
   

2. 버튼 ‘웃는 강아지’ : id= dog1

   <a href="#" data-img="dog6.jpg" id="dog1" >웃는 강아지</a>&nbsp;
   

웃는 강아지라는 버튼에 마우스를 올리면 target영역이 웃는 강아지로 변하게 하고 싶다.

JS에서

1. window.onload = function(){} 으로 HTML 과 CSS가 다 로드 된 후에 JS코드가 실행되게끔 해준다.

   window.onload = function(){}
   

2. 문서 로딩이 끝난 후, target과 dog1 요소를 가져와 변수에 저장한다.

   window.onload = function(){
       var target  = document.getElementById("target");
   	var dog1= document.getElementById("dog1");}
   

3. dog1.onmouseover = function(){//일어날 동작} 를 사용해 dog1 버튼에 마우스가 올려질 경우 일어날 동작을 function 에 넣는다. 나는 dog1에 마우스가 올라가면 사진을 바꾸고싶다.

   window.onload = function(){
       var target  = document.getElementById("target");
       var dog1= document.getElementById("dog1");
       dog1.onmouseover = function(){
           //code
       }
   }
   

4. 아래 코드는 dog1에 마우스가 올라가면 사진을 바뀌게 한다. this가 사용되었다.1번과 똑같은 논리로 작성된 코드.

   dog1.onmouseover = function(){
           var clicked = this.getAttribute("data-img");
           target.setAttribute("src", clicked);
       }
   

전체

window.onload = function(){
    var target  = document.getElementById("target");
	var dog1= document.getElementById("dog1");
    dog1.onmouseover = function(){
        var clicked = this.getAttribute("data-img");
        target.setAttribute("src", clicked);    }
}

JS에서 event 걸기 - 여러개 버튼

버튼 여러개를 사용하는 예시 **: 방법2-1 과 비슷하다. 그러나 **class 를 사용해 버튼들을 어레이로 받는다는 점, for문에 넣어서 onmouseover를 확인한다는 점이 다르다.

화면이 다음과 같이 구성되어 있다.

1. 사진이 들어간 곳 : id= ‘target’

   <img id="target" src="dog4.jpg" alt="이미지">
   

2. 버튼들은 하나의 클래스를 공통으로 가진다. (class= “dog”) 이게 2-1과 다른 점이다.

   <a href="#" data-img="dog6.jpg"  class="dog" >웃는 강아지</a>&nbsp;
   <a href="#" data-img="dog5.jpg"  class="dog" >웃는 강아지</a>&nbsp;
   

3. dog라는 class를 가지는 요소들을 js에서 어레이로 받는다.

   window.onload = function(){
      var target  = document.getElementById("target");
      var dogs= document.getElementsByClass("dog");}
   

4. 그리고 dogs에 있는 모든 object들에 object.onmouseover = function(){//일어날 동작}해주면 된다. 만약dogs가 length 가 3개라면 코드가 아래와 같을 것이다.

   window.onload = function(){
      var target  = document.getElementById("target");
      var dogs= document.getElementsByClass("dog");
      dogs[0].onmouseover = function(){
           var clicked = this.getAttribute("data-img");
           target.setAttribute("src", clicked);    }
      dogs[1].onmouseover = function(){
           var clicked = this.getAttribute("data-img");
           target.setAttribute("src", clicked);    }
      dogs[2].onmouseover = function(){
           var clicked = this.getAttribute("data-img");
           target.setAttribute("src", clicked);    }
   }
   

5. 위를 for문으로 간단하게 한번에 표시해줄 수 있다.

window.onload = function(){
   var target  = document.getElementById("target");
   var dogs= document.getElementsByClass("dog");
   for(var i = 0;i<dogs.length;i++){
       dogs[i].onmouseover=function(){
           var clicked = this.getAttribute("data-img");
           target.setAttribute("src", clicked);
       }
   }
}