Javascript 반환과 메소드

.getElementsByClassName()

getElementsByClassName() 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection을 반환합니다.

.getElementById()

주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

.querySelector()

querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

EventTarget.addEventListener()

addEventListener()는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동합니다.
EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. 일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

<button type="button" id="btn_plus" class="btn-plus">증가</button>
<button type="button" id="btn_minus" class="btn-minus">감소</button>
<script>
var btnPlus = document.getElementsByClassName("btn-plus"); // → HTMLCollection [button.btn-plus]
btnPlus.addEventListener("click", fnPlus); // (X) Uncaught TypeError : ...is not a function

// addEventListener를 줄수있는 대상
/* class로 접근 */
var btnPlus = document.getElementsByClassName("btn-plus")[0];
var btnPlus = document.querySelector(".btn-plus");
/* id로 접근 */
var btnPlus = document.getElementById("btn_plus");
var btnPlus = document.querySelector("#btn_plus");
</script>

getElementsByClassName() 메소드는 Element 가 아닌 객체를 반환하고
addEventListener() 메소드는 기본적으로 Element 를 대상으로 하기 때문에
객체 뒤에 [0]을 붙여 Element 에 접근하거나,
아니면 대신에 하나의 Element 만을 선택해주는 querySelector() 를 사용하면 해결~★