괴발개발/Javascript+JQuery

JS_요소선택

moonday 2021. 6. 21. 23:51
  <title>요소선택 예제</title>
</head>
<body>
  <button id="btn1" class="btn">클릭</button>
  <script>
    /*
    - 클릭 버튼을 클릭했을 때, '안녕하세요' 알림창이 뜨도록 코드를 작성하세요
    */


    var btn = document.getElementById('btn1');
    btn.addEventListener('click',function(){
      alert('안녕하세요1');
    })

    var btn = document.getElementsByClassName('btn');
    btn[0].addEventListener('click',function(){ //클래스로할때는 번지표현을 해줄 것
      alert('안녕하세요2');
    });

    var btn = document.querySelector('#btn1');
    btn.addEventListener('click',function(){ //클래스로할때는 번지표현을 해줄 것
      alert('안녕하세요3');
    });

    var btn = document.querySelectorAll('.btn');
    btn[0].addEventListener('click',function(){ //클래스로할때는 번지표현을 해줄 것
      alert('안녕하세요4');
    });


  </script>
</body>

'괴발개발 > Javascript+JQuery' 카테고리의 다른 글

JS_document객체  (0) 2021.06.21
JS_타이머 기능예제  (0) 2021.06.21
JS_이벤트(event)  (0) 2021.06.21
JS_정규표현식  (0) 2021.06.21
JS_날짜(Date, Date형식 수정)  (0) 2021.06.21