[Basic] JavaScript DOM API (1)

5. JavaScript DOM API

1) DOM

• Document Object Model 약어
• 이는 Document(HTML)에 들어있는 여러가지 오브젝트 모델을 뜻한다.
• 오브젝트 모델은 div, span, input등과 같은 HTML 요소를 뜻한다.
• 브라우저에서는 HTML 요소를 DOM이라는 객체 형태의 모델로 저장한다.

2) API

• Application Programming Interface 약어
• 이는 웹사이트가 동작하기 위해 입력하는 프로그램 명령을 뜻한다.
• 따라서, DOM API란 쉽게 말해 자바스크립트로 HTML을 제어할 때 사용하는 여러가지 명령이다.
• 브라우저는 HTML 요소를 찾고 조작을 쉽게 도와주는 여러가지 속성(propery)와 메소드(method)를 제공한다.

  let boxEl = document.querySelector('.box');
  // .box라는 css 선택자를 통해 html의 특정 요소를 찾아 boxEl이라는 변수에 할당
  console.log(boxEl);

3) querySelector

• DOM API의 한 종류로 DOM의 최상위 객체는 document이다.
• 해당 객체 안에는 querySelector라는 메소드가 정의되어 있다.
• 메소드를 사용할 시, 인수로 찾으려고 하는 해당하는 요소의 css 선택자를 명시한다.
• 선택자에 맞게 HTML에서 찾아서 반환해주는데 반환하는 값을 boxEl이라는 변수에 할당한다.
• 주의) 해당 선택자를 통해 찾을 수 있는 요소 중에 첫 번째 값만 반환한다.

  const boxEl = document.querySelector('.box');
  // HTML 요소(Element) 1개 검색/찾기

4) addEventListener

• HTML 요소에 적용할 수 있는 메소드(method)
• 해당 메소드의 인수로 이벤트와 핸들러가 있다.
• 브라우저가 HTML의 요소의 어떠한 이벤트(상황)가 발생하는지 청취하고 있는다.
• 이벤트(상황)이 실제로 발생하게 되면 함수(핸들러)를 실행하게 하는 메소드이다.

  boxEl.addEventListener();
  // 인수(Arguments)를 추가 가능!
  boxEl.addEventListener(1, 2);
  // 1 - 이벤트(Event, 상황)
  boxEl.addEventListener('click', 2);
  // 2 - 핸들러(Handler, 실행할 함수)
  boxEl.addEventListener('click', function () {
    console.log('Click~!');
  });

5) classList

• HTML 요소에 적용할 수 있는 속성(property)
• HTML 요소의 클래스라는 전역 속성에 대한 정보를 가지고 있는 특정한 개체로 활용한다.

  const boxEl = document.querySelector(.box);
  
  // 요소의 클래스 정보 객체 활용!
  boxEl.classList.add('active');
  let isContains = boxEl.classList.contains('active');
  console.log(isContains); // true
  
  boxEl.classList.remove('active');
  isContains = boxEl.classList.contains('active');
  console.log(isContains); // false