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의 차이를 이해한다.

심화 학습 목표

• DOM과 JavaScript의 차이에 대해 이해할 수 있다.
• createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
• HTML5 template tag 사용법을 이해할 수 있다.
• element와 node의 차이를 이해할 수 있다.
• children과 childNodes의 차이를 이해할 수 있다.
• remove와 removeChild의 차이를 이해할 수 있다.
• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
• offsetTop 등을 이용하여 좌표 정보를 조회할 수 있다.
• offsetWidth 등을 이용하여 크기 정보를 조회할 수 있다.

• document 객체에는 많은 속성과 메서드 존재
• CRUD(Create, Read, Update, Delete)를 활용

2-1. CREATE

• document.createElement('요소이름')
  • 새로운 요소를 만듬
• JavaScript에서 어떤 작업의 결과를 담으려면, 변수를 선언하고 어떤 작업의 결과를 변수에 할당
  • const 변수명 = document.createElement('요소이름')
• 하지만 화면에는 변화가 없는게 당연!
  • 아무것도 연결되어 있지 않은 노드이기 때문
  • 연결되어 있지 않은 엘리먼트를 확인하기 위해서는 APPEND 해야함(트리구조에 연결)

2-2. APPEND

• document.body.append(변수명)
  • 만든 변수를 body 안에 넣음
• 만든 요소 안에 아무런 내용이 없으면 보이는 내용이 없음
• 개발자 도구 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
  • CSS 스타일 적용
• setAttribute()
  • id, class 제외한 다른 attribute 추가

2-5. DELETE

• remove()
  • 삭제하려는 요소의 위치를 알고 있는 경우
• innerHTML
  • 여러 개의 자식 요소를 삭제할 경우
  • 보안에 문제를 가지고 있기 때문에 다른 메서드 사용
• removeChild
  • 자식 요소를 지정하여 삭제
  • 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용

innerHTML과 textContent의 차이

• innerHTML는 이름 그대로 HTML을 반환하지만,(태그까지 반환), textContent는 요소의 모든 자식 요소를 포함한 텍스트 내용을 반환하고, HTML 태그를 해석하지 않고 텍스트만 반환