[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/5
3주차.Chapter 02
DOM API
(Document Object Model, Application Programming Interface)
HTML의 요소들
<script src="./main.js">가 <body> 위에서 <div class="box">Box!!</div>를 찾는데,
<body>의 내용을 읽기 전에 찾고 있기 때문에, null이라고 나온다.
수업에서 진도 나가지 않았는데, 시험 문제를 내는 것 처럼 script는 box에 대한 정보가 0도 없는 상태
//방법 1. <body> 맨 아랫줄로 옮긴다.
<body>
<div class="box">Box!!</div>
<script src="./main.js"></script>
</body>
//방법 2. 'defer'라는 단어를 추가해 준다.
//script는 '정보'에 해당하는 내용이니 <head>안에 모아 두는게 좋다.
<head>
<script defer src="./main.js"></script>
</head>
document.querySelector('요소');
요소.addEventListener('이벤트', function() {});
요소.classList.메소드('이름');
해당 요소(box)에
addEventListener로
1. 지정한 이벤트(click)가 발생하는지 지켜보고/듣고있다가 이벤트가 발생하면
2. 익명 함수(function () {})로 적어 놓은 코드가 동작한다.
(document.querySelector('.box')는 제일 첫 '.box'만 선택한다.)
** 이런 addEventListener, classList 등을 DOM API라고 부른다.
document.querySelectorAll('요소');
요소.forEach(function () {});
유사 배열 데이터로 만들어진 모든 box에 함수를 차례대로 적용시킨다.
boxEls 중 0번째에 class `order-&{0+1}` = order-1를 넣고
console.log로 (0, boxEls) 찍고 boxEls 1번째로 넘어가서 똑같이 반복
이해가 되지 않는 부분!
console.log로 boxEl를 찍고
classList.add로 `order-${index+1}`을 하고
console.log로 boxEl를 다시 찍었는데
classList.add 이전과 이후 class명이 동일하지?
요소.textContent
메소드 체이닝
(Method Chaining)
split => a에 있는 문자를 빈문자열('')을 기준으로 잘라서 [] 배열로 반환 => [H, e, l, l, o]
reverse => 배열 뒤집기 => [o, e, l, l, H]
join => 배열을 빈문자열('')을 기준으로 병합 => olleH
** 아무때나 아무에서나 체이닝이 가능한건 아님
수업에서 아직 중요하게 다뤄지지 않았지만
split은 지정한 인수가 사라진다. L이 두 개가 있어서 빈칸이 생긴 것 같은데, 정확히 이해가 되지 않는다..
reverse를 어디에 넣든 array가 뒤집어져 있다...
join에 들어가는 인수는 forEach 처럼 array의 모든 값에 지정한 인수를 붙여준다.
역시 JS는 어렵다...^^