출처
지난 시간에 윈도우 객체를 window로 접근했죠. document도 윈도우 객체의 속성이기 때문에 window.document
이렇게 접근해야합니다. 하지만 window는 생략 가능(전역 객체)하기 때문에 그냥 document로 접근하면 되겠습니다. 역시 콘솔에 document하고 점을 쳐보면 수 많은 속성과 메소드들을 보실 수 있습니다.
https://cdn.filepicker.io/api/file/UkwaTnwSbmbavLvD2Z7z
window 객체 때 했던 것처럼 document 객체에서도 자주 쓰이는 것만 집어드리겠습니다. document는 html에 관한 것들을 담당하는 객체이니만큼 대부분의 것들이 태그를 선택하고 조작하는 데 사용됩니다.
html에서 해당 아이디를 가진 태그를 선택합니다.
document.getElementById('app-root'); // <div id="app-root" data-reactid="32">...</div>
html에서 각각 해당 클래스, 네임, 태그명을 가진 태그를 선택합니다. 여러개 선택되기 때문에 항상 배열입니다. 메소드 이름도 Elements입니다.
document.getElementsByTagName('nav'); // [<nav class="pTYnty2zkYzsdEoN1fhmO" data-reactid="8">…</nav>]
css 선택자로 선택할 수 있게 해줍니다. 아이디는 #, 클래스는 .(점)입니다. 태그명[속성명=속성값] 같은 것도 할 수 있고, 부모 > 자식, 부모 자손 등등 css의 선택자는 거의 다 쓸 수 있습니다. 위의 메소드보다 이 메소드를 더 많이 쓰게 될 겁니다.
document.querySelector('#app-root'); // <div id="app-root" data-reactid="32">...</div>
document에 새로운 태그를 만들 때 사용합니다. 만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. 만든 태그를 추가하는 메소드는 따로 있습니다. 다음 시간에 알려드리겠습니다.
var div = document.createElement('div'); // 메모리에 div가 생성됨
텍스트도 하나의 요소입니다. 텍스트를 따로 만들 수 있습니다. 여기서 Node는 태그와 텍스트를 가리키는 명칭입니다. 역시 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다.