Unit 11 회고

DOM기초

• DOM(Document Object Model): HTML 요소를 Object 처럼 조작할 수 있는 Model, HTML의 작은 부분까지 접근할 수 있는 구조

  • console.dir: DOM을 객체의 모습으로 출력
  • children: 자식 요소를 가리키는 속성
  • parentElement: 부모 요소를 가리키는 속성

• document 객체

  • document 객체는 브라우저 환경에서만 접근 가능
  • 즉, 자바 스크립트 자체요소가 아닌 브라우저에서 제공되는 것
  • 브라우저에서 제공하는 window 객체의 한 요소, DOM 트리의 최상위 노드

• DOM이 만들어지는 과정
  1. 웹 사이트 접속 시 브라우저가 HTML 문서를 읽어들임
  2. 문서 해석(파싱) 후 결과물로 트리 구조의 DOM이 만들어짐

DOM다루기

• CRUD(Create, Read, Update, Delete): HTML 요소 추가, 조회, 변경, 삭제
  • createElement: 요소 추가
  • querySelector(셀렉터): 셀렉터 조회, 요소 정보 조회
  • querySelectorAll(): HTML 요소를 ‘유사 배열’로 받아옴
  • textContent: 태그 안 내용 삽입
  • classList.add(클래스이름): 요소를 클래스에 추가
  • setAttribute(name, value): 원하는 속성 추가
  • remove(): 요소 삭제
  • innerHTML: 여러 개의 자식 요소 삭제 가능, 보안 문제
  • removeChild: 자식 요소 지정해서 삭제
• Append: 생성한 요소를 트리 구조에 연결
  • 기본 형식: document.원하는 위치.append()

추가적인 내용

DOM과 JavaScript

• DOM은 자바스크립트와 같은 ‘프로그래밍 언어’는 아님
• 자바스크립트라는 프로그래밍 언어로 작성된 문서와 문서의 요소에 접근하기 위해 DOM이 사용
• 문서의 모든 element는 문서를 위한 DOM의 한 부분

createDocumentFragment 활용하기

• DocumentFragment 란?
  DOM의 조각을 정의할 수 있는 노드로 기본적으로 DOM과 동일하게 동작하지만, HTML의 DOM 트리에는 영향을 주지 않으며, 메모리에서만 정의됨

• DocumentFragment를 어떤 요소에 추가하면 DocumentFragment의 내용은 비어있음(즉, 복사하지 않음)
• DocumentFragment는 DOM에 반영하기 전까지는 메모리상에서만 존재 -> DocumentFragment의 자체의 변경이 DOM 구조의 변경으로 이어지지 않으므로 성능 면에서 효율적임
  참조 링크1
  참조 링크2

HTML5 template tag

• template 태그는 페이지가 로드될 때 사용자에게 숨겨진 일부 HTML 콘텐츠를 보관하는 컨테이너로 사용
• template 태그는 나중에 자바스크립트로 렌더링 가능(사용자가 볼 수 있도록)
  참조 링크1
  참조 링크2

element와 node의 차이

• node는 element의 상위 개념
  • node: 태그, 텍스트, 주석 등 모두 포함
  • element: HTML문서에서 태그를 사용해서 작성된 node
    참조 링크

children과 childNodes의 차이

• children: 자식 요소에 접근(element 개념)
  • HTMLCollection 반환 -> element 노드(태그로 이루어진 노드)가 아닌 노드는 모두 제외
  • HTMLCollection은 노드의 변경 사항이 실시간 반영
• childNodes: 자식 노드에 접근(node 개념)
  • NodeList 반환 -> element 노드 뿐만 아니라 주석 노드 등도 모두 포함
  • NodeList는 대부분 한 번 저장된 값을 계속 사용(childNodes는 예외)
    참조 링크

remove와 removeChild의 차이

• remove(): DOM에서 요소 제거
  • 메모리에서 요소 삭제 후 종료
• removeChild(): DOM에서 자식 노드 제거, 제거된 노드 반환
  - 메모리에서 해당 노드는 존재, DOM 트리에서 해제하여 부모-자식 관계를 끊은 노드를 반환
  참조 링크1
  참조 링크2

같은 element appendChild 시 기존 element 복사 여부

<div class="a">
    <span></span>
</div>
<div class="b"></div>


const span = document.querySelector(‘span’); 
const divB = document.querySelector(‘.b’); 
divB.appendChild(span);

• 위의 상황의 경우 span은 class B의 자식 노드가 되고 class A에서는 삭제됨(즉, class B로 이동)
• class A에 남지 않는 이유(복제되지 않는 이유)
  • 트리 구조에서 자식은 하나의 부모만을 가짐
  • 만약 span 요소가 appendChild() 메서드를 통해 class A에 남아있고 class B에 복제된 것이라면 span 요소는 부모가 둘이 되므로 이전 부모에서 제거해 주어야 함
    appendChild() 복사 여부

offsetTop과 offsetWidth 활용하기

요소 사이즈 관련 속성

이벤트 객체

onclick(직접 할당)과 addEventListener의 차이점

• onclick은 이벤트 여러 개 적용 불가
  • 이벤트 추가 시 기존 이벤트를 덮어씌움
• addEventListener의 경우 이벤트 여러 개 적용 가능
  • 이벤트 추가 시 기존 이벤트에 추가적으로 누적되어 모든 이벤트가 동작
    관련 링크

과제 후 만들어 본 회원가입 창

• 아이디와 비밀번호 조건 설정, 비밀번호와 비밀번호 확인의 일치 여부, 회원가입 비활성화 등 동작

<오늘의 일기>
'와 이게 뭐지' 싶을 정도로 생소하고 어려웠던 DOM. 처음에는 DOM이 무엇인지 대략적으로 설명하기조차 힘들어 드디어 올 게 왔구나 싶었다. 하지만 손 놓고 있기에는 남은 날들이 많기에 계속 DOM에 대해 찾아보고 이해하려고 노력하다보니 이제는 어렴풋이 DOM이 무엇이며 어떻게 사용하는지 감이 오기 시작했다.(고 생각했다.)
처음 과제를 열어봤을 때 이게 뭔가 싶었지만 최대한 내가 이해할 수 있는 선에서 해보자라는 생각으로 과제를 수행했고 테스트가 통과되어 다행이라는 생각으로 잠시 안일한 마음을 가졌다..ㅎ 하지만 페어분과 도전과제를 수행하다보니 내가 참 부족하구나라는 생각이 들었다.
이번에 같이 했던 페어를 통해서는 공부를 할 때의 접근방식이나 마음가짐을 많이 배운 것 같다. 나는 항상 어떠한 문제가 있으면 당장의 과제를 해결하는 것 이상으로는 더 나아가지 않는 편인데 이번 페어를 통해 좀 더 깊이있게 공부할 수 있는 방법이나 자세를 많이 배우게 되어 나를 돌아보는 시간이 되었던 것 같다.