스타벅스 웹 사이트 만들기 - ch.9 JS 선행 (6) ~ (9)

6. DOM API(1)

Document Object Mpde, Application Programming Interface

DOM API를 하기 전에

script 태그를 고쳐야 함!!
script 태그에 defer 속성을 붙여야 정상적으로 할 수 있음
=> 문서는 위에서 아래로 읽기 때문에 구조를 모두 읽은 후에 script 태그를 실행하라고 명령해야 함

• HTML 요소 1개 검색/찾기
  => 제일 먼저 찾아지는거 하나만!

const boxEl = document.querySelector('.box');

• 이벤트 리스너 사용

boxEl.addEventListener('click', function () {
	console.log(123);
});

• 요소의 클래스 정보 객체 활용

boxEl.classList.add('adtive');
let isContains = boxEl.classList.contains('active');
console.log(isContains);

boxEl.classList.remove('adtive');
isContains = boxEl.classList.contains('active');
console.log(isContains);

7. DOM API(2)

• HTML 요소 모두 검색/찾기

const boxEls = document.querySelectorAll('.box');

• 찾은 요소들 반복해서 함수 실행!
  => 익명 함수를 인수로 추가

boxEls.forEach(function () {});

• 매개변수(1번째: 반복 중인 요소, 2번째: 반복 중인 번호)

boxEls.forEach(funtion (boxEl, index) {});

• 출력

boxEls.forEach(funtion (boxEl, index) {
	boxEl.classList.add(`order-${index + 1}`);
	console.log(index, boxEl);
});

• Getter, 값을 얻는 용도

console.log(boxEl.textContent);

• Setter, 값을 지정하는 용도

boxEl.textContent = 'dongdu';
console.log(boxEl.textContent);

8. 메소트 체이닝

• split: 문자를 인수 기준으로 쪼개서 배열로 반환
• reserve: 배열을 뒤집기
• join: 배열을 인수 기준으로 문자로 변합해 반환

const a = 'hi!';
const b = a.split('').reserve().join(''); // 메소드 체이닝

console.log(a);
console.log(b);