[javascript] 2022.09.16

1. onclick 속성

<div class="alert-box" id="alert">
      알림창임
      <button onclick="document.getElementById('alert').style.display='none';">
        닫기
      </button>
  
 

.addEventListener 의 클릭 속성 안쓰고 html의 onclick 속성 써도 가능

2. 콜백함수

파라미터 자리에 들어가는 함수

document
        .getElementById("closeButton")
        .addEventListener("click", function () {
          document.getElementById("hello").style.display = "none";
        });

위와 같은 예시에 있는 함수가 콜백함수임

3 .classlist

클래스명 추가하는 이벤트

document.getElementsByClassName('list-group')[0].classList.toggle('show');
// .add는 추가하는거 
// .toggle은 있으면 삭제하고 없으면 추가해라 

4. querySelector(),querySelectorAll()

querySelector(#hello)
querySelector(.hello)


querySelectorAll(.hello)[3]

장점: 굳이 class와 id를 나누지 않아도 돼서 편리함
단점: class는 첫번째 클래스를 찾아줌
다 찾을려면 querySelectorAll로 찾아야함 => 인덱싱 필요함