JS 선행(2)

1. DOM API

• Document Object Model, Application Programming Interface
  • Document, 즉 HTML에 들어있는 Object Model -> div, span, input 등
  • API : 웹사이트가 동작하기 위해 입력하는 명령들
• script 태그를 head 내에 작성하면 body 내용 반영 장애 -> ⭐ script 태그 내에 defer 속성 추가하기(속성값X)

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

// 첫 번째 매개변수 : 이벤트(Event, 상황)
// 두 번째 매개변수 : 핸들러(Handler, 실행할 함수)
 boxEl.addEventListener('click', function(){
 	console.log('Click!!');
 });

// HTML 요소 1개 검색/찾기
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

// HTML 요소 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

// 찾은 요소들 반복하여 함수 실행
// 첫 번째 매개변수 (boxEl) : 반복 중인 요소
// 두 번째 매개변수 (index) : 반복 중인 번호
boxEls.forEach(function(boxEl, index){
	boxEl.classList.add(`order-${index+1}`);
	console.log(index, boxEl);
});

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

// Getter
console.log(boxEl.textContent);

// Setter
boxEl.textContent = 'JW!!';
console.log(boxEl.textContent);

2. 메소드 체이닝 (Method Chaining)

const a = 'Hello~';

// split : 문자를 인수 기준으로 쪼개 배열로 반환
// reverse : 배열 뒤집기
// join : 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝

console.log(a); // Hello~
console.log(b); // ~olleH

• 메소드를 뒤로 이어붙여 사용
• 제한 조건 존재