JavaScript - DOM API(1)

01.DOM API (The Document Object Model)

• 문서 객체 모델(DOM)은 HTML 또는 XML과 상호작용을 위한 일종의 API이다.
• 브라우저에서는 HTML 요소를 DOM이라는 객체 형태의 모델로 저장한다.
• DOM API란 자바스크립트로 HTML을 제어할 때 사용하는 여러가지 명령이다.
• javascript 를 통해 웹 콘텐츠를 동적으로 제어할 수 있는 이유는 DOM 이 중간에서 interface 역할을 해주기 때문이다.
• 브라우저는 HTML 요소를 찾고 조작을 쉽게 도와주는 여러가지 속성(propery)와 메소드(method)를 제공한다.

02.querySelector

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

// HTML 요소(Element)중 가장 먼저 찾은 요소 하나를 반환
const boxEl = document.querySelector('.box'); 

03.addEventListener

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

// HTML 요소에 적용할 수 있는 메소드! (이벤트 처리)
boxEl.addEventListener(); 

// 1 -인수 추가 가능!
boxEl.addEventListener(1, 2); 

// 2 - 이벤트 (Event, 상황)
boxEl.addEventListener('click', 2); 

// 3 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener("click", function() { 
	console.log("Click~!");
});

04.classList

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

// 가장 먼저 찾은 요소 하나를 반환
const boxEl = document.querySelector('.box'); 

// 선택자 요소에 클래스 추가 후 확인 (active 클래스 추가)
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

• contains(): 문자열에서 특정 문자를 포함하고 있는지 확인하는 메소드