JavaScript Selector, mouse 관련 이벤트 (onmouseover, onmouseleave)

1. Java Script 셀렉터 종류

➢요소의 ID명
▪ document.getElementById(“”);

➢요소의 class명
▪ document.getElementsByClassName(“”);

➢요소의 tag 명
▪ document.getElementsByTagName(“”);

➢ document.querySelector(‘’);
▪ 맨 처음 발견한 것만 반환

➢ document.querySelectorAll(‘’);
▪ 일치하는 것 모두 반환

---

 

2. CSS 조작

➢innerTEXT
▪ 태그도 문자자체로 인식
▪ <br> 문자그대로 <br>로 입력

➢innerHTML
▪ 태그를 변경할 때사용
▪ <br> 입력하면 줄바꿈

➢ CSS조작 예시
▪ addEventListener
  ✓ 특정 행동시 함수 발동
  ✓ 예시에서는 button을 클릭하 면, log가 찍히는 함수 발동
▪ 변수의 style 속성에서 color, className등의 변경 가능

    function init(){
      console.log('init!!');

      //버튼생성
      let $button = document.getElementById('my_button');
      $button.addEventListener('click', function() {
        console.log('Click!!!');
      });
    }     // close function init

    // CSS 조작1 _ color 변경
    function changeStyle() {
      let $target = document.getElementById('target');
      console.log('클릭!!!!!!!!');
      $target.style.color = 'pink';       //pink로 id가 target인 요소의 색 변경
    }


    //CSS 조작2 _ class 변경
    function changeClass() {
      let $target = document.getElementById('target');
      console.log('클릭!!!!!!!!');
      $target.className = 'big-text';       //pink로 id가 target인 요소의 색 변경
    }


    //CSS 조작 3 _ selector _ css 셀렉터 그대로 조작가능
    /*
    document.querySelector('#target')
    document.querySelectorAll('.small-text')
    document.querySelectorAll('button')

    document.write('hello World<br>');
    document.write('hello World');
    */

 

3. mouse 관련 이벤트 (onmouseover, onmouseleave)

  <!-- 마우스가 영역위에 있을때, 영역을 떠났을 때 -->
  <div id="box" onmouseover="onMouseOver()" onmouseleave="onMouseLeave()">onmouseover="onMouseOver()"</div>

  <script>
    //마우스 조작시 작동할 함수1
    function onMouseOver(){
      console.log('onMouseOver');
    }

    //마우스 조작시 작동할 함수2
    function onMouseLeave(){
      console.log('onMouseLeave');
    }
  </script>

onmouseover, onmouseleave 상태일 때 함수를 작동하게 해서 console에 log를 남기도록 했다.
위의 CSS조작 코드를 함께 작성하면 더 풍부한 코드가 된다.

 

 

참고자료

w3schools