Chapter 2. 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의 차이를 이해한다.
심화 학습 목표
document
객체에는 많은 속성과 메서드 존재
- CRUD(Create, Read, Update, Delete)를 활용
2-1. CREATE
- document.createElement('요소이름')
- JavaScript에서 어떤 작업의 결과를 담으려면, 변수를 선언하고 어떤 작업의 결과를 변수에 할당
- const 변수명 = document.createElement('요소이름')
- 하지만 화면에는 변화가 없는게 당연!
- 아무것도 연결되어 있지 않은 노드이기 때문
- 연결되어 있지 않은 엘리먼트를 확인하기 위해서는 APPEND 해야함(트리구조에 연결)
2-2. APPEND
- document.body.append(변수명)
- 만든 요소 안에 아무런 내용이 없으면 보이는 내용이 없음
- 개발자 도구 Element 탭에서 확인할 수 있음
2-3. READ
- DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 선택자(selector)를 전달하여 확인할 수 있음
- 선택자로는 HTML 요소, id, class 세 가지가 가장 많이 사용
- 참고
- querySelector는 선택자를 조회한다는 의미를 가지고 있음
- query의 의미가 "질문하다"라는 것을 알고 있다면 역할을 쉽게 유추할수 있으며,
- 이 query라는 단어는 개발자 간에 "ㅇㅇㅇ를 조회한다"라는 의미를 "쿼리를 날리다"라는 jargon(특정 영역에서만 사용되는 단어)로 굳어졌기 때문에 알고 있어야 함!
- document.querySelector(selectors)
- document.querySelectorAll(selectors)
- document.getElementById(id)
2-4. UPDATE
- 생성한 빈 요소를 업데이트하여, 보다 다양한 작업을 할 수 있음
- .textContent
- .classList
- setAttribute()
- id, class 제외한 다른 attribute 추가
2-5. DELETE
- remove()
- innerHTML
- 여러 개의 자식 요소를 삭제할 경우
- 보안에 문제를 가지고 있기 때문에 다른 메서드 사용
- removeChild
- 자식 요소를 지정하여 삭제
- 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용
innerHTML과 textContent의 차이
- innerHTML는 이름 그대로 HTML을 반환하지만,(태그까지 반환), textContent는 요소의 모든 자식 요소를 포함한 텍스트 내용을 반환하고, HTML 태그를 해석하지 않고 텍스트만 반환