[SEB FE] Section 1
Unit11 - [JS/브라우저] DOM
- DOM 기초
- DOM 다루기
회고
오늘은 DOM, DOM 트리에 대해서 배웠습니다. 말로만 듣던 그 DOM!! 코드 스테이츠 매니저님께서는 리엑트가 오토 승용차라면 돔은 수동 스포츠카라고 표현을 하시네용 ㅎㅎ
그 말의 의미는... 작동 방식은 조금 까다롭고 불편하게 느껴지지만 최고의 성능을 내기 위해 자바스크립트 개발자라면 꼭 알고 있어야 할 기초 중의 기초 클래식 중의 클래식이라고 합니다. (껄껄)
물론 전에 조금 다뤄보기는 했지만 이렇게 기초부터 배우고 실습까지 하게 되어서 더 좋은 거 같습니다. 다들 오늘도 고생 많으셨습니다.^^ 내일도 화이팅~!
DOM의 기초
학습목표
- DOM의 개념을 이해한다.
- DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.
- HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.
개념학습
우선 <script> 요소는 등장과 함께 실행된다.<script> 요소를 추가하는 두 가지 사례
<head>안쪽에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>→ 첫 번째 console.log 출력은 성공
console.log('welcome JavaScript');
welcome JavaScript → 두 번째 console.log의 경우 제대로 출력을 못하고 null을 출력
let msgElement = document.querySelector('#msg');
console.log(msgElement);
nullnull이 나오는 이유
head에 script를 통해 자바스크립트를 수행한다면 body태그는 아직 파싱되기 전이기 때문에 자바스크립트에서 해당 태그가 무엇인지 알 수 없다. 따라서 null이 나온다.
<body>요소가 끝나기 전에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</body>
</html>→ 첫 번째 console.log 출력 성공
입력
console.log('welcome JavaScript');
출력
welcome JavaScript → 두 번째 console.log도 출력 성공
입력
let msgElement = document.querySelector('#msg');
console.log(msgElement);
출력
<div id="msg">Hello JavaScript!</div>script태그를body태그 하단에 위치하는 것이 좋은 이유
HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
또한 DOM 트리가 생성되기 전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
따라서 위와 같은 상황을 막기 위해 script 태그는 body 태그 취하단에 위치하는 게 좋다.
DOM 다루기
학습목표
- DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE)
- DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ)
- DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE)
- DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE)
- 생성한 HTML Element를 부모 엘리먼트의 자식 엘리먼트로 포함할 수 있다. (APPEND)
innerHTML과textContent의 차이를 이해한다.
개념학습
CREATE
document.createElement()APPEND
document.append()READ
-
DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는
querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있다. -
셀렉터로는 HTML 요소, id, class 세 가지가 가장 많이 사용된다.
querySelector
- 하나의 요소를 가져올 때
document.querySelector()- 여러 개의 요소를 한 번에 가져올 때
querySelectorAll은 모든 HTML 요소를 유사 배열로 받아옵니다.
document.querySelectorAll()UPDATE
- CREATE, APPEND, READ를 통해 내가 원하는 것을 새롭게 UPDATE를 할 수 있다.
DELETE
remove()