getElementByClassName 셀렉터
- 어떤 html 요소를 찾고 변경할 때
id로 찾았는데 class로 찾을 수 있다
<p class="title1"> 테스트1 </p>
<p class="title2"> 테스트2 </p>
<script>
document.getElementsByClassName('title1')[0].innerHTML = '안녕';
</script>
- 처음
<p> 태그의 내용이 안녕으로 바뀐다
getElementsByClassName('클래스명')[순서]
- [0]과 같이 순서를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문이다
그래서 몇 번째 요소를 바꿀지 [순서]를 붙여줘야 한다
이벤트 리스너
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">알림창임</p>
<button id="close">닫기</button>
</div>
<button onclick="alertId()">버튼1</button>
<button onclick="alertPassward();">버튼2</button>
<script>
document.getElementById('close').addEventListener('click', function() {
document.getElementById('alert').style.display = 'none';
});
function alertId() {
document.getElementById('title').innerHTML = '아이디를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
function alertPassward() {
document.getElementById('title').innerHTML = '비밀번호를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
</script>
</body>
</html>
event
- 이벤트 리스너에서
event는
유저가 웹페이지에 접속해서 스크롤, 키보드 입력, 드래그 등을 하는 것을 의미함
- click 이벤트: 어떤 요소 클릭
- scroll 이벤트: 스크롤
- mouseover 이벤트: 마우스 갖다대기
- keydown 이벤트: 키 입력
- 등등..
- event가 일어나길 기다리는 것이
이벤트 리스너
- 이벤트 리스너는 이벤트가 일어나면 내부 코드를 실행해주는 문법
셀렉터로찾은요소.addEventListener('mouseover', function(){
실행할코드
});
- 셀렉터로 찾은 요소에 마우스를 갖다대면 코드 실행
셀렉터로찾은요소.addEventListener('scroll', function(){
실행할코드
});
- 셀렉터로 찾은 요소가 스크롤되면 특정 코드를 실행
셀렉터로찾은요소.addEventListener('keydown', function(){
실행할코드
});
- 셀렉터로 찾은 요소에 키보드로 글자를 입력하면 특정 코드를 실행
이벤트 목록
콜백 함수
셀렉터로찾은요소.addEventListener('scroll', function(){} );
- 소괄호 붙으면 함수라고 볼 수 있다
addEventListener() 함수에는 파라미터 자리에 2개의 자료를 집어 넣는다
- 여기서 두 번째 파라미터로 함수가 들어간다
- 함수 파라미터 자리에 들어가는 함수를
콜백함수라고 함
콜백함수는 순차적으로 실행하고 싶을 때 많이 보이는 함수형태- 함수 안에 함수 넣으면
콜백함수라고 생각하면 됨
