ZeroCho Blog

이번 시간에는 지난 시간 Window 객체에 이어 Document 객체에 대해 소개하겠습니다. 따로 강좌를 뺄 만큼 내용이 많습니다.

Document

지난 시간에 윈도우 객체를 window로 접근했죠. document도 윈도우 객체의 속성이기 때문에 window.document 이렇게 접근해야합니다. 하지만 window는 생략 가능(전역 객체)하기 때문에 그냥 document로 접근하면 되겠습니다. 역시 콘솔에 document하고 점을 쳐보면 수 많은 속성과 메소드들을 보실 수 있습니다.

window 객체 때 했던 것처럼 document 객체에서도 자주 쓰이는 것만 집어드리겠습니다. document는 html에 관한 것들을 담당하는 객체이니만큼 대부분의 것들이 태그를 선택하고 조작하는 데 사용됩니다.

document.getElementById(아이디)

html에서 해당 아이디를 가진 태그를 선택합니다.

document.getElementById('app-root'); // <div id="app-root" data-reactid="32">...</div>

document.getElementsByClassName(클래스), document.getElementsByName(이름), document.getElementsByTagName(태그)

html에서 각각 해당 클래스, 네임, 태그명을 가진 태그를 선택합니다. 여러개 선택되기 때문에 항상 배열입니다. 메소드 이름도 Elements입니다.

document.getElementsByTagName('nav'); // [<nav class="pTYnty2zkYzsdEoN1fhmO" data-reactid="8">…</nav>]

document.querySelector(선택자), document.querySelectorAll(선택자)

css 선택자로 선택할 수 있게 해줍니다. 아이디는 #, 클래스는 .(점)입니다. 태그명[속성명=속성값] 같은 것도 할 수 있고, 부모 > 자식, 부모 자손 등등 css의 선택자는 거의 다 쓸 수 있습니다. 위의 메소드보다 이 메소드를 더 많이 쓰게 될 겁니다.

document.querySelector('#app-root'); // <div id="app-root" data-reactid="32">...</div>

document.createElement(태그명)

document에 새로운 태그를 만들 때 사용합니다. 만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. 만든 태그를 추가하는 메소드는 따로 있습니다. 다음 시간에 알려드리겠습니다.

var div = document.createElement('div'); // 메모리에 div가 생성됨

document.createTextNode(텍스트);

텍스트도 하나의 요소입니다. 텍스트를 따로 만들 수 있습니다. 여기서 Node는 태그와 텍스트를 가리키는 명칭입니다. 역시 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다.

var text = document.createTextNode('텍스트');

document.createDocumentFragment()

가짜 document를 만듭니다. 왜 이게 중요하냐면 자바스크립트로 document의 태그를 조작하는 것은 매우 성능이 떨어집니다. 특히 여러 태그를 반복문을 통해 동시에 추가할 때는요. 이럴 때 미리 가짜 document를 만들어서 여기에 추가를 한 후, 한 번에 document에 추가합니다. 이러면 진짜 document는 한 번만 조작하면 돼서 성능에 부담이 덜합니다.

간단하게 미리 보여드리겠습니다. 다음 시간에 다루겠지만 appendChild 메소드가 바로 추가하는 코드입니다.

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

div에 text를 담고, 그것을 fragment에 담은 후 최종적으로 body에는 fragment를 담았습니다. 직접적으로 body에 영향을 주는 것은 fragment를 추가할 때, 단 한 번입니다. 만약 appendChild같은 조작을 많이 해야할 경우, fragment에다가 한 후에 마지막에 fragment를 추가하면 됩니다.

document.head, document.body

각각 html의 head와 body에 접근할 수 있게 해줍니다.

document.anchors, document.links, document.forms, document.images, document.scripts

이름처럼 각각 모든 html 앵커, 링크, 폼, 이미지, 스크립트에 접근할 수 있게 해줍니다.

document.title

문서의 제목에 접근 가능합니다. 바꿀 수도 있고요. 문서의 제목은 바로 탭에 써 있는 글자입니다!

document.title = '여길 보세요';

위를 보면 바뀌었죠?

다음 강좌에는 document로 선택한 태그들에 관한 얘기(DOM)를 해보겠습니다!