Unit10. 회고 [JS/브라우저] DOM
2023. 1. 11. 13:38ㆍ코드스테이츠/코드스테이츠 : 위클리 회고
성취도
상중하
이해도 자가 점검 리스트
Chapter1. DOM 기초
- DOM의 개념을 이해한다.
- DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다. // 트리구조
- HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다. // 스크립트 파일을 <body>밑단에 배치해야 한다. 스크립트를 읽어오는 동안 html파싱을 중단시키기 때문이다.
Chapter2. DOM 다루기
- DOM을 JavaScript로 조작하여 HTML 요소를 추가할 수 있다. (CREATE) // document.createElement()
- DOM을 JavaScript로 조작하여 HTML 요소를 조회할 수 있다. (READ) // document.queryselector()
- DOM을 JavaScript로 조작하여 HTML 요소를 변경할 수 있다. (UPDATE) // .textContent / innerHTML / innerText
- DOM을 JavaScript로 조작하여 HTML 요소를 삭제할 수 있다. (DELETE) // remove / removeChild / innerHTML-' '
- 생성한 HTML 요소를 부모 요소의 자식 요소로 포함시킬 수 있다. (APPEND) // append
- innerHTML과 textContent의 차이를 이해한다. // textContent는 오직 문자열로만 읽어오고,입력가능하다/ innerHTML은 문자열이 아닌 HTML 태그나 마크업 언어도 가능하다.
DOM을 이용한 CRUD의 실전 사용
DOM메서드에 대해 학습을 하여 단편적으로 이해를 했다고 해도, 실전 프로젝트인 아고라스테이츠에서는 그 기능등을 어떻게 사용해야할지 너무 막막했다. document.createElement() 를 통해 태그를 만들어주고 그 안의 내용을 innerHTML이나 textContent 를 사용 하여 채우고 클래스나 아이디를 부여해주고 append로 붙여주는 일련의 과정이 매끄럽지 못했고 머릿속에 자리잡지 못했다는 것이 매우 체감됐다. 심지어 만능이라 생각했던 innerHTML은 위험요소가 있다고 하여 사용이 지양되는 것 같아 더 복잡하고 머리가아프다. DOM은 차차 좀 더 깊게 공부해봐야 할 것 같다.
'코드스테이츠 > 코드스테이츠 : 위클리 회고' 카테고리의 다른 글
| 1월 마지막 주 회고 (2) | 2023.01.29 |
|---|---|
| Section.1 회고 (0) | 2023.01.11 |
| Unit9. 회고 [JavaScript] 핵심 개념과 주요 문법 (0) | 2023.01.11 |
| Unit.8 [JS 배열과 객체] (0) | 2023.01.02 |
| Unit7. [Linux/git 기초] (0) | 2022.12.28 |