[Javascript] DOM API 메소드 적용

📌 DOM API

Document Object Model Application Programming Interface 의 약어이다.

• 흔히 우리가 HTML에서 제어하는 div, span, input 등의 요소들을 Document Object Model 이라고 한다. - DOM
• 프로그램을 사용하기 위한 명령들의 집합을 Application Programming Interface 라고 한다. - API

즉, DOM API는 HTML의 요소들을 JS에서 제어하기 위한 명령들의 집합을 뜻 한다.

메소드 적용

👉 클릭 이벤트

//DOM에서 이벤트리스너를 적용할 요소 선언
const box = document.querySelector(".box");

//html에 적용할 메소드이며, 인수 적용 가능.
box.addEventListener(1, 2);

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

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

👉 엑티브 이벤트

const box = document.querySelector(".box");

//요소의 클래스 객체정보, active 클래스 추가
box.classList.add("active");
let isContain = box.classList.contains("active");
console.log(isContain); //true

//active 클래스 삭제
box.classList.remove("active");
let isContain = box.classList.contains("active");
console.log(isContain); //false

👉 검색 이벤트

const boxs = document.querySelectorAll(".box");

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

👉 값 지정 이벤트

const box = document.querySelector(".box");

//Getter, 값을 얻는 용도
console.log(box.textContent); // 콘텐츠안의 텍스트

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

✅ 다양한 메소드를 적용하는 방식으로 인해 원하는 동작을 구현하거나 기능을 만들수 있다.

👉 메소드 체이닝

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

✨ 여러 메소드들이 이어져 있는 형태를 메소드체이닝이라 한다.

✅ join이 배열를 문자로 병합하기 때문에 split 다음으로 쓰기엔 적절하지 않음. 이러한 각각의 속성에 따라 맞게 쓸 수 있다.