getElementsByClassName()

---

어떤 요소를 찾고 변경할 때 id로 찾는 방법 외에도

class명으로 찾을 수도 있습니다.

<p class=title1>테스트1</p>
<p class=title1>테스트2</p>

<script>
  document.getElementByClassName('title1')[0].innerHTML = '안녕';
</script>

이러면 첫

태그 내용이 안녕으로 바뀝니다.

[0] 이렇게 순서를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문입니다.

그래서 그 중에 몇 번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여줘야 합니다.

getElementsByTagName -> 태그명으로 찾기

getElementsByName -> name 속성으로 찾기

등 여러가지 셀렉터가 있는데 class, id 로 찾는게 가장 흔합니다.

EventListner

---

지금까진 버튼의 onclick=”” 안에 자바스크립트를 길게 짰는데 이것도 실상은 길고 지저분해 보입니다.

지저분해 보여 싫다면 이벤트리스너 문법을 사용하면 됩니다.

document.getElementById('어쩌구').addEventListner('click', function() {
  // 실행할 코드
});

이렇게 작성하면 ‘id가 어쩌구인 요소를 클릭하면 안의 코드를 실행해 주세요’ 라는 뜻입니다.

event

---

사용자가 웹페이지에 접속해서

클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이걸 통틀어 이벤트 라고 합니다.

이벤트 종류

: https://developer.mozilla.org/en-US/docs/Web/Events

콜백함수

---

셀렉터로찾은요소.addEventListener('scroll', function(){} );

addEventListner() 함수에는 2개의 파라미터가 옵니다.

첫 번째는 ‘이벤트’, 두 번째는 ‘콜백함수’

함수의 파라미터로 들어가는 함수를 콜백함수라고 합니다.