(JavaScript) DOM 조작방법

• DOM과 JavaScript의 차이에 대해 이해할 수 있다.

DOM은 JavaScript 언어의 일부가 아니라 웹사이트를 구축하는 데 사용되는 Web API.

JS는 다른 컨텍스트에서도 사용할 수 있다.

DOM은 특정 프로그래밍 언어와 독립적으로 설계되어 문서의 구조적 표현을 일관된 단일 API에서 사용할 수 있습니다.

 

• createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.

 

• HTML5 template tag 사용법을 이해할 수 있다.

<template>: The Content Template element - HTML: HyperText Markup Language | MDN

<template> 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용

 

<template> 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다. 하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다.

 

<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다. 만약 <template> 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다.

 

 

• element와 node의 차이를 이해할 수 있다.

Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다. 

 

• children과 childNodes의 차이를 이해할 수 있다.

자식으로 갈 때는 children(텍스트 노드 제외)또는 childNodes(텍스트 노드 포함)를 사용합니다

 

• remove와 removeChild의 차이를 이해할 수 있다.

remove() 는 노드를 메모리에서 삭제하고 종료합니다.
removeChild()는 노드를 삭제하는 것이 아닙니다.

 

• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? 

Here is why appendChild moves a DOM node between parents - JavaScript inDepth

 

• 좌표 정보 조회를 할 수 있다. - offsetTop...

 

• 크기 정보 조회를 할 수 있다. - offsetWidth...

표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, offsetWidth와 offsetHeight 속성을 사용하세요:

 

크기 정보 조회 방법 보러가기

 

Further Study

아래 키워드에 대해서 직접 검색하여 학습하세요.

• element와 node의 차이 (difference between element and node in javascript dom)
• children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
• removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
• tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
• tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)