DOM API & Method Chaining

DOM(Document Object Model) API(Application Programming Interface)

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

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

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

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

// 2- 핸들러(Handler, 실행할 함수) 
// 이벤트가 발생시 그를 처리하는 함수를 핸들러라고 한다.
  boxEl.addEventListener('click', function() {
    console.log('Click~!');
  })

// 요소의 클래스 정보 객체 활용 ! 
  boxEl.classList.add('active');
  let isContains = boxEl.classLsit.contains('active');
  console.log(insContains); // true

  boxEl.classList.remove('active');
  let isContains = boxEl.classLsit.contains('active');
  console.log(insContains); // false

자바스크립트에서는 클래스이름으로 요소의 정보를 가져와서 클래스 이름을 추가 혹은 삭제하거나 해당 요소에 이벤트가 발생하면 처리하는 함수 '핸들러'가 있다.

 

 

 

const boxEls = document.querySelectorAll('.box');
console.log (boxEl);

boxEls.forEach(function (boxEL, index) {
	boxEl.classList.add(`order-${index}`);
        console.log(index, boxEl);
});

// getter, 값을 얻는 용도
	console.log(boxEl.textContent);

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

HTML을 굳이 보여주지 않았지만,  .box 클래스 네임을 가진 모든 요소를 가져와서 forEach로 해당 각 요소의 인덱스 값을 읽어와

템플릿 리터럴로 클래스이름을 새로 넣어주고, 출력하는 코드이고, 값을 얻거나 지정하냐에 따라 DOM API getter, setter 라는 말을 붙인다. 

 

 

Method Chaining

const a = 'Hello~';

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

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

상단의 코드처럼 메소드를 이어 붙여 체인처럼 이어진것을 말하는데 클린코드를 위해 중요한 것 같다.