createDocumentFragment
자바스크립트에서 사용하는 빈 객체, 빈 배열과 같은 역할을 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var element = document.getElementById('ul'); // ul 선택
var fragment = document.createDocumentFragment(); // 빈 배열,
빈 객체와 같은 역할을 한다.
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer'];
browsers.forEach(function(browser) { // 배열의 요소들을
var li = document.createElement('li'); //
li.textContent = browser; li에 담고, 거기에 text로 만든다.
fragment.appendChild(li); // 빈 객체에 정보를 담고
});
element.appendChild(fragment); //한 번에 자식으로 넣어준다.
element와 node의 차이
노드 인터페이스(Node Interface)는 DOM의 가장 기본이 되는 데이터 타입이다.
노드 인터페이스를 구현한 여러 오브젝트가 있으며, 노드 타입으로 구분할 수 있다.
예) 엘리먼트 노드, 텍스트 노드, 속성 노드 등등
정리: 노드는 엘리먼트의 상위 개념이다.
children과 childNodes의 차이
현재 요소의 자식 노드가 포함된 NodeList를 반환합니다.
이때 반환되는 NodeList에는 요소 노드뿐만 아니라 주석 노드와 같은 비 요소 노드를 포함합니다.
childNode 노드를 선택한다. 태그노드, 텍스트노드를 모두 가리킨다.
childrend 텍스트 노드를 제외한 태그를 가리킨다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
<div class="test1">테스트1</div>
<div class="test1">테스트1</div>
<span class="span">스팬</span>
<div class="test2">테스트2</div>
<span class="span">스팬</span>
</body>;
document.body.children;
HTMLCollection(5)[(div.test1, div.test1, span.span, div.test2, span.span)];
document.body.childNodes;
NodeList(11)[
(text,
div.test1,
text,
div.test1,
text,
span.span,
text,
div.test2,
text,
span.span,
text)
];
remove와 removeChild의 차이
remove() 는 노드를 메모리에서 삭제하고 종료합니다. 하는데 반해,
반면 removeChild()는 노드를 삭제하는 것이 아닙니다.
메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것입니다.
최종적으로는 관계를 끊은 해당 노드의 참조를 반환합니다.
appendChild와 append
appendChild는 DOM 함수
노드 객체만 삽입 가능
노드 갯수 하나만 허용
append는 JavaScript 함수
문자열, 텍스트 노드, 엘리먼트 노드 삽입 가능
document.getElementByid(‘jin’).append(‘Hi’); 사용가능