이번에는 DOM API에 대해 알아보자.
여기서 DOM은 Document Object Model의 약어이다. Document란 HTML에 들어있는, Object Model이란 대표적으로 DIV나 SPAN 요소, INPUT 요소 등 을 의미한다. API란 Application Programming Interface로 웹 사이트가 동작하기 위해서 입력하는 프로그래밍 명령이라고 생각하면 된다. 즉 DOM API란 자바 스크립트에서 HTML을 제어하는 명령들이라고 보면 된다.
body 태그에 box클래스를 가진 div 요소를 추가하고, js파일에 다음과 같이 코드를 추가해주었다. 참고로 html 파일에 js 코드 경로를 추가할 때 defer 를 추가해주어야 정상적으로 작동한다.
1번 줄의 코드는 .box 라는 css 선택자를 찾아서 boxEl 요소에 할당한다는 의미이다. querySelector는 가장 먼저 찾아진 요소 1개만 반환해서 넘겨준다!
addEventListener 코드는 첫번째 인수에 작성한 이벤트 상황이 일어나면, 두번째 인수에 들어있는 함수를 실행한다.
결과적으로 boxEl 요소(=.box 클래스를 가진 요소)를 클릭하면 콘솔창에 Click~! 이라는 코드가 출력된다.
아래 사진과 같이 7번줄에 코드를 추가해주었다.
그랬더니 개발자모드에서 확인해보았을 때 box 클래스에 active 클래스도 추가된 것을 확인할 수 있다.
다음으로 아래의 코드를 살펴보자. body 태그에는 box 클래스를 가진 div요소를 4개 작성한 상태이다.
qeurySelectorAll은 해당하는 선택자를 모두 반환해주고, boxEls는 여러 요소를 넘겨 받아 배열 형태가 된다(정확하게는 유사배열 Array-like 형태). forEach는 찾은 요소를 반복해서 함수 실행해준다.
function 함수의 1번 매개변수에 반복 중인 요소를, 2번 매개변수에 반복 중인 번호를 넣어줬다.
개발자 모드에서 콘솔 창을 확인했더니 각각의 요소에 사진과 같이 클래스가 추가되어 있는 걸 확인할 수 있다.
textContent에 대해 알아보자.
textContent는 값을 얻는 용도, Getter로도 쓰이고 값을 지정하는 용도, Setter로도 쓰인다.
3번 줄에서 box요소에 들어있는 텍스트로 이루어져 있는 내용이 반환되는 Getter용도로 쓰였고, 5번 줄에서 값을 지정하는 Setter용으로 쓰였다.
콘솔 창에서 확인해보면 처음엔 div 요소의 내용에 쓰여있던 문자 '1'이 출력되었고, 다음에는 우리가 할당했던 'HEROPY!' 값이 출력되는 것을 확인할 수 있다.
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 28일차 - Part1. Ch10 (0) | 2021.11.28 |
|---|---|
| 패스트캠퍼스 챌린지 27일차 - Part1. Ch9 (0) | 2021.11.27 |
| 패스트캠퍼스 챌린지 25일차 - Part1. Ch9 (0) | 2021.11.25 |
| 패스트캠퍼스 챌린지 24일차 - Part1. Ch9 (0) | 2021.11.24 |
| 패스트캠퍼스 챌린지 23일차 - Part1. Ch9 (0) | 2021.11.23 |