[React] 강의 4주차 (2) -JS ( DOM API, 메소드 체이닝)

[국비지원교육]  [패스트캠퍼스] React 강의 4주차 (2) - JS (JavaScript)

 

- DOM API

- 메소드 체이닝

- 내용정리 Qna

 

---

 

 

[ Javascript  ] 

 

1. DOM API : Document Object Model, Application Programming Interface

 

box가 하나일 경우,

 

box

 

<div class="box">box</div>

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

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

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

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

// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function() {
  console.log('Click~');
});
</script>

// 요소의 클래스 정보 객체 활용!
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

boxEl.addEventListener('click', function() {
  console.log('Click~');
  boxEl.classList.add('active');
  console.log(
    boxEl.classList.contains('active');
  );
  boxEl.classList.remove('active');
  console.log(
    boxEl.classList.contains('active')
  );
});

 

 

box가 여러개일 경우,

 

box 1

box 2

box 3

box 4