window vs document

window는 브라우저 전체를 담당하는 객체이다. 모든 객체의 조상이다. 전역객체라고 한다.
document는 html에 관한 것들을 담당하는 객체이다.
태그를 선택하는 방법에는 id, name, tag, class가 있다.
document.getElementById, document.getElementsByClassName, document.getElementsByName, document.getElementsByTagName

css선택자로 선택을 할 수 있다.
document.querySelector(선택자), document.querySelectorAll(선택자)

document.createDocumentFragment()는 가짜 document를 만드는 것이다.
document의 태그로 조작하는것은 성능이 매우 떨어진다.
보통 반복문을 통해 추가할때 가짜 document을 만들어 여기에 추가하고 한번에 document에 추가한다.

1
2
3
4
5
6

var div = document.createElement('div');
var text = document.createTextNode('텍스트');
var fragment = document.createDocumentFragment();
div.appendChild(text);
fragment.appendChild(div);
document.body.appendChild(fragment);