-일반적으로 html과 css는 단순히 처음 한번 웹 페이지에 모습을 드러내고 나면 그 이후에는 특별히 어떤 변화를 주는 것이 어렵다는 한계가 있음

• Javascript 코드를 이용하면 웹페이지를 동작할 수 있음

id로 태그 선택하기

• document.getElementById('id_이름'): id 속성을 가지고 태그를 선택할 수 있음
• 존재 하지 않는 태그를 선택하게 되면 undefined가 아닌 null 값이 리턴 됨
  
  

class로 태그 선택하기

• document.getElementsByClassName('class_이름'): class 속성을 가지고 여러 태그를 한번에 선택할 수 있음

• HTMLCollection 유사배열이 출력 됨

  • 유사배열(Array-Like Object): 배열과 형태는 유사하지만 배열의 메소드는 사용할 수 없는 것들
  • 하지만 대괄호 표기법, length 프로퍼티, for...of 문을 사용할 수 있음
    

• 요소들의 순서는 html 태그에서 봣을 때 깊이와는 상관 없이 무조건 위에서부터 차례대로 임

• 클래스가 하나 밖에 없는 요소를 선택하더라도 요소가 한 개 있는HTMLCollection이 출력 됨

  • 요소에 접근하려면 0번 인덱스에 접근해야 함

• 존재하지 않는 클래스 값을 찾게 되면 null 값이 아닌 빈 HTMLCollection이 출력 됨

const myTags3 = document.getElementsByClassName('white'); // white는 없는 class임
console.log(myTags3); // HTMLCollection(0)
console.log(myTags3 === null); // false
console.log(myTags3.length); // 0

유사 배열(Array_Like Object)이란?

• 배열과 유사(類似)한 객체
• 유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있음

1. 숫자 형태의 indexing이 가능함
   • 배열 처럼 요소에 0부터 시작하는 숫자 형태의 index가 있어야 함
2. length 프로퍼티가 있음
   • 객체가 가지고 있는 요소의 갯수를 저장하는 length 프로퍼티가 있어야 함
   • 숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 봄
3. 배열의 기본 메소드를 사용할 수 없음
   • 배열의 메소드를 활용할 수 없다는 특징이 유사 배열을 활용하는 목적이 되기도 함
   • 내부의 요소들은 배열처럼 다룰 수 있게 하면서 배열의 메소드 사용을 막고 싶거나, 혹은 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 만들어 활용하기도 함
4. Array.isArray(유사배열)은 false임
   • Array 객체의 isArray 메소드는 파라미터로 전달한 값이 배열인지 아닌지를 평가해서 그 결과를 불린 형태의 값으로 리턴해주는 메소드 임
   • 유사 배열은 배열과 비슷하지만 배열은 아니기 때문에 결괏값이 false 임

• 주의사항: 유사 배열은 다양함!
  • 유사 배열은 위의 특징들을 가진 대부분의 형태를 가리키는 포괄적인 개념이기 때문에 정말 다양한 형태로 존재할 수 있음

태그 이름으로 태그 선택하기

• document.getElementsByTagName('tag_이름'): 태그 이름으로 태그를 선택할 수 있음
• 실행결과로 HTMLCollection을 리턴함
• css 선택자처럼 * 값을 전달하게 되면 모든 태그를 선택할 수도 있음
• 명확한 의도가 없이 이렇게 많은 요소들을 한꺼번에 다루게 되면 예상치 못한 실수를 할 가능성이 있기 때문에 자바스크립트에서도 많이 사용되는 메소드는 아님

css 선택자로 태그 선택하기

• document.querySelector('css선택자'): css 선택자로 html 태그를 유연하게 선택할 수 있음
  • 요소가 여러 개인 class를 선택하면 유사 배열이 아닌 가장 첫 번째 요소만 선택되므로 주의하기!
  • 존재하지 않는 요소를 선택할 경우 null값을 리턴함

const myTag = document.querySelector('#myNumber');
console.log(myTag);

• document.querySelectorAll('css선택자'): 여러개의 선택자를 선택할 때
  • NodeList라는 유사 배열이 선택됨
  • 존재하지 않는 요소를 선택할 경우 비어있는 NodeList를 리턴함

const myTags1 = document.querySelectorAll('.color-btn');
console.log(myTags1);

• getElement방식과 querySelector방식 중 메소드 이름이 짧고 하나의 메소드로 유연하게 태그 선택이 가능하다는 점에서 querySelector사용을 추천함

이벤트와 버튼 클릭

• 이벤트: 웹 페이지에서 일어날 수 있는 대부분의 일들
• 이벤트 핸들링: 이벤트가 발생했을 때 어떤 특별한 동작을 하도록 자바스크립트를 통해 이벤트를 다루는 것
• 이벤트 핸들러: 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부름
• 이벤트 핸들러를 등록하는 방법

1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기

// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#grade');

// 이벤트 핸들링(Event Handling)
btn.onclick = function() { // 이벤트 핸들러(Event Handler)
	  alert('정답입니다!👏');
};

2. HTML 태그의 onclick 속성에 바로 표시하기

<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>

자바스크립트로 태그 선택하기 요약

참고 자료

• 코드잇_인터랙티브 자바스크립트