728x90 300x250 SMALL javaScript/Vanilla JS6 클래스 제어, 토글, 조건문 버튼 클릭 시 클래스 토글(활성화 상태 표시) 다음 jQuery를 Vanilla JS로 변경해 보자토글 버튼 Vanilla JS토글 버튼 토글 버튼">토글 버튼 1. document.querySelector(".btn3")html에서 .btn3클래스가 붙은 첫 번째 요소를 선택 2. .addEventListener("click", function*(){...})해당 버튼을 클릭했을때 실행할 함수 (이벤트 핸들러)를 지정 3. this.classList.toggle("active")this.는 현재 클릭한 요소 자신을 의미함classList는 해당 요소에 적용된 클래스 목록을 관리할 수 있는 DOM 객체toggle("active")는active 클래스가 없으면 추가 있으면 제거 2025. 4. 18. Vanilla JS 기초 연습 - 버튼 클릭하면 alert 띄우기 다음의 jQuery 예시를 Vanilla JS로 변경해 보자클릭하세요! 클릭하세요!">클릭하세요! Vanilla JS - 버튼 클릭하면 alert 띄우기클릭하세요! 클릭하세요!">클릭하세요! - Document.querySeector() - 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환, 일치하는 요소가 없으면 null을 반환document.querySelector(selectors); ※선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용한다. - EventTarget,addEventListener() - 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.addEventListener(type, li.. 2025. 4. 17. 이전 1 2 다음 728x90 반응형 LIST