JS 특징 2

DOM API

=Document Object Model, Application Programming Interface
자바스크립트에서 HTML을 제어하는 명령들 (이미 약속되어 있는 명령)

defer

<script defer src="./main.js"></script>
defer : 가져온 JS 파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성

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

// HTML 요소에 적용할 수 있는 메소드
box.El.addEventListener();

// 인수(Arguments)를 추가 가능
box.El.addEventListener(1, 2);

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

// 2 - 핸들러(Handler, 실행할 함수)
box.El.addEventListener('click', function () {
  console.log('Click');
});

// HTML 요소(Element) 검색 / 찾기
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 요소(Element) 모두 검색 / 찾기
const boxEls = document.querSelectorAll('.box')
console.log(boxEls);

// 찾은 요소들 반복해서 함수 실행
// 익명 함수를 인수로 추가
boxEls.forEach(function () {});

// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});

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

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

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // box의 내용 반환

// Setter, 값을 지정하는 용도
boxEl.textContent = 'Hello!';
console.log(boxEl.textContent); // Hello!

메소드 체이닝 (Method Chaining)

메소드를 체인처럼 이어서 만드는 것

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

console.log(a); // Hello
console.log(n); // olleH