체크 포인트

Dom 이란

: Document Object Model이라는 뜻으로 HTML에 담긴 객체(태그)에 접근-인식하는 모델(방식)

Dom의 구조

: tree 형식의 구조를 따름

(예시를 참고하며 만든 예시)

Dom의 기본 다루기

생성(Create)

.creatElement를 통해 요소를 생성할 수 있지만 위의 상태에서는 트리에 추가(append)된 상태는 아님

추가(Append)

• 

• 부모.append를 통해 생성한 요소를 트리에 추가했지만, id=container인 div에 들어가지는 못한 상태

• target에 tweet을 추가할 부모를 저장하고 해당 위치에 추가하면

• container에 잘 담긴 것을 확인

조회(Read)

• 
  클래스 이름이 tweet인 첫 번째 요소를 담음

• 클래스 이름이 tweet인 모든 요소를 담음
  이렇게 담은 요소들은 배열처럼 사용할 수 있지만, 사실 배열이 아닌 객체라고 함(Array-like Object 배열처럼 생긴 객체)

• 위에서 container에 넣는 과정에서 부모를 읽는 과정이 자연스럽게 Read부분의 예시가 됨

갱신(Update)

• 생성한 요소에 문자열 'div' 담기
• 생성한 요소에 tweet 클래스 속성 만들어주기
• 요소(oneDiv)를 위에서 조회한 부모(target => #container)에 추가하기
• 잘 들어간 것을 확인 👍

삭제(Delete)

• remove를 사용하면 해당 변수에 할당되어 있는 요소 삭제
• innerHTML을 사용하면 편리하게 자식요소를 삭제할 수 있지만 innerHTML을 사용해 텍스트를 사용하는 경우 잠재적인 공격 경로로 사용될 수 있어 사용을 지양
• 해당 방법은 tweet 클래스에 해당하는 요소들 중 tweet 클래스인 요소를 제거하는 동작으로 결과적으로 container의 모든 요소 삭제
• 해당 방법 혹은 for문을 사용해 다양한 방법으로 원하는 요소들을 제거 가능

이벤트 객체

: Dom과 관련한 이벤트(onclick, onscroll, onkeyup등) 발생시 이벤트 발생한 요소, 이벤트 타입등 관련한 정보가 담기는 객체

• 이벤트 안에는 target, type, view, eventPhase등 많은 매소드를 가지고 있으며 다양한 활용이 가능

• 이벤트 매소드 사용 예시
  .event를 통해 이벤트 정보를 받아오고, target매소드를 사용해 이벤트의 요소를 파악한 후, 요소의 문자열 정보를 가져와 담음

후기

• 이번 유닛을 통해 Dom을 활용한 HTML 수정과 이벤트 객체의 활용을 배움
• 다른 언어에서도 이벤트에 대한 처리가 존재하지만 HTML을 변경하는데 활용 된다는 점에서 이벤트 처리에 대한 중요도가 더 높다고 생각
• 전 css 디자인에서 사용하지 않은 animation 기능도 활용해 보았으며 더 다양한 css를 적용 수정해 보며 익힐 것(과제 참고)