📌 DOM이란?

Document Object Model

• 문서 객체 모델
• HTML, XML 문서의 각 요소들을 계층적으로 표현하여 문서 내 요소들을 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다.

📌 DOM에서 HTML 요소 찾기

document.getElementbyId("")

• 인자로 찾으려는 요소의 id를 문자열 형태로 전달 (대소문자 구분)
• id는 유일한 값이므로, 하나의 element만 리턴한다.

document.getElementbyClassName("")

• 인자로 찾으려는 요소의 class 이름을 문자열 형태로 전달 (대소문자 구분)
• 해당 class 이름을 가지는 모든 element 목록을 리턴한다. (순회 가능)

document.getElementsByClassName("red blue");

• 다수의 class 이름을 모두 포함하고 있는 element를 찾을 때 이용
• 인자로 class 이름들을 스페이스로 구분하여 전달
• 위 예시는 class 이름에 'red'와 'blue' 모두를 포함하는 element를 리턴한다.

document.getElementsByTagName('div);

• 인자로 찾을 element의 태그 이름을 전달한다.
• 해당 태그를 가진 모든 element를 리턴한다.

document,querySelector("")

• 인자로 받은 CSS선택자를 통해, element를 찾아 리턴한다.
• ID로 찾기: document.querySelector('#div_1');
  • id 이름 앞에 #을 붙여 인자로 전달한다.
  • 위 예시는 id가 'div_1'인 element를 찾아 리턴한다.
• Class로 찾기: document.querySelector('.my');
  • class 이름 앞에 .을 붙여 인자로 전달한다.
  • 만약 해당 class 이름을 가진 element가 2개 이상이라면 첫 번째 element를 리턴한다.
  • 위 예시는 class 이름이 'my'인 element 중 첫 번째 element를 찾아 리턴한다.
• Tag로 찾기: document.querySelector('h1');
  • 인자로 태그명을 문자열로 전달한다.
  • 만약 해당 태그명을 가진 element가 2개 이상이라면 첫 번째 element를 리턴한다.
  • div태그를 가지는 element 중 첫 번째 element를 리턴한다.
• ,로 구분하기: document.querySelector('.red, .green');
  • 선택자를 ','로 구분하여 전달하면 여러 개의 선택자 중 첫 번째로 발견되는 선택자를 가진 element를 리턴한다.
• 복잡한 선택자: const el = document.querySelector("div.user-panel.main input[name=login]");
  - 위 예제는 클래스 이름으로 user-panel와 main을 가진 <div> 태그 안에 (<div class="user-panel main">), name 속성이 login인 <input> 중 첫 번째 element 리턴

document.querySelectorAll("")

• 앞서 보았던 document.querySelector("")와 사용법은 동일하다.
• 다만 document.querySelector("")는 첫 번째 element만을 반환했다면, document.querySelectorAll("")은 인자로 전달한 CSS 선택자로 찾은 모든 element 목록을 리턴한다.

📌 이벤트 리스너

target.addEventListener(type, listener);

• addEventListener() 메서드는 지정한 이벤트가 target에 전달될 때마다 호출할 콜백함수를 설정한다.
• type: 첫 번째 인자로는 반응할 이벤트 유형을 문자열 형태로 전달한다. (click, input, change 등)
• listener: 두 번째 인자로는 해당 target에게 이벤트가 발생했을 때 호출할 함수를 전달한다. (react to the event)