Document 객체( querySelector, getElementById, createElement )

Document

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 = '여길 보세요';

위를 보면 바뀌었죠?