getElementsByClassName 셀렉터
어떤 html 요소를 찾고 변경할 때 id로 찾았지만
class로도 찾기 가능
<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>class 명이 title1인걸 찾으세요~ 라고 명령하기
<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>
<script>
document.getElementsByClassName('title1')[0].innerHTML = '안녕';
</script>첫번째 <p> 태그 내용이 안녕으로 바뀐다
getElementsByClassName('클래스명')[순서]
[순서] 넣는 이유는 ? ?
getElementsByClassName 셀렉터가 일치하는 class를 모두 찾기 때문이다
그래서 몇번째 요소를 바꿀지 순서를 붙여줘야한다
이벤트 리스너
버튼의도 더러워 보일 수 있기 때문에
이벤트리스너 문법을 사용하면 된다
document.getElementById('뿅뿅').addEventListener('click', function(){
//실행할 코드
});-> 'id가 뿅뿅인 요소를 클릭하면 안의 코드를 실행해주세요' 라는 뜻
<button id="close">닫기</button>
...
document.getElementById("close").addEventListener("click", function () {
document.getElementById("alert").style.display = "none";
});-> alert 박스 내부의 닫기버튼이 닫힌다
더 배워볼 개념 1. event
이벤트란?
유저가 웹페이지를 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이 행동들을 이벤트 라고 한다
어떤 요소 클릭시엔 click 이벤트
마우스갖다대면 mouseover 이벤트
스크롤하면 scroll 이벤트
키입력하면 keydown 이벤트
이벤트가 일어나길 기다리는 친구가 이벤트리스너!
👇이벤트 목록👇
https://developer.mozilla.org/en-US/docs/Web/Events
더 배워볼 개념 2. 콜백함수
셀렉터로찾은요소.addEventListener('scroll', function(){} );첫번째 파라미터에는 이벤트,
두번째 파라미터에는 함수가 들어가는데
이 함수를 '콜백함수' 라고 한다
💻