DOM vs Javascript

DOM은 JavaScript 언어의 일부가 아니라 웹사이트를 구축하는 데 사용되는 Web API입니다. JavaScript는 다른 컨텍스트에서도 사용할 수 있습니다. 예를 들어 Node.js는 컴퓨터에서 JavaScript 프로그램을 실행하지만 다른 API 세트를 제공하며 DOM API는 Node.js 런타임의 핵심 부분이 아닙니다.

createDocumentFragment

Document Fagrments는 main DOM 트리의 일부가 아닌 DOM node 객체입니다. 일반적인 사용 사례는 문서 조각을 만들고 문서 조각에 요소를 추가한 다음 DOM 트리에 문서 조각을 추가하는 것입니다. DOM 트리에서 문서 조각은 모든 자식으로 대체됩니다.

문서 조각이 메모리 에 있고 기본 DOM 트리의 일부가 아니므로 여기에 자식을 추가해도 페이지 리플로우(요소의 위치 및 기하학 계산)가 발생하지 않습니다. 역사적으로 문서 조각을 사용하면 성능이 향상될 수 있습니다 .

const fragment = new DocumentFragment();

const element  = document.getElementById('ul'); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ['Firefox', 'Chrome', 'Opera',
    'Safari', 'Internet Explorer'];

browsers.forEach((browser) => {
    const li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

같은 element를 appendChild 할 경우

같은 element를 appendChild 할 경우, 기존 element를 복사하는 게 아니라 이동한다! 기존 노드에서 사라지고 appendChild한 노드로 이동한다

node vs element

node는 여러가지 다양한 종류가 존재한다. node는 태그, 텍스트, 주석 모두 포함된다. elementsm는 이런 node의 여러가지 종류중 하나이다. element는 html문서에서 태그를 사용해서 작성된 노드라고 할 수 있다. 즉, node는 element의 상위개념이다.

childNodes vs children