[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

'스터디 > React' 카테고리의 다른 글

[React] 강의 5주차 (1) -JS (Javascript)  (0)	2022.11.15
[React] 강의 4주차 (3) -JS (Node.js / NVM, NPM)  (0)	2022.11.08
[React] 강의 4주차 (1) -JS (데이터, 변수, 함수, 조건문)  (0)	2022.11.04
[React] 강의 3주차 (3) - CSS 속성 (transform, perspective, backface-visibility)  (0)	2022.11.01
[React] 강의 3주차 (2) - CSS 속성 (flex,transition)  (0)	2022.11.01