출처

(JavaScript) Document 객체

Document

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

https://cdn.filepicker.io/api/file/UkwaTnwSbmbavLvD2Z7z

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는 태그와 텍스트를 가리키는 명칭입니다. 역시 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다.