document interface
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다.
nomadcoders의 '바닐라 JS 클론코딩'을 수강했다.
javascript 입문을 위해 수강했는데 모르는 것 투성이였다.
그래서 이번 글에서는 document에 대해 다룰 것이다.
document
document는 브라우저에서 load된 웹페이지를 다루라고 쥐어준 리모콘이라고 해석할 수 있는거 같다.
사용법만 알면 웹페이지를 구성하는 contents들에 대해 접근, 조작을 할 수 있다.
즉 웹페이지의 URL을 받아올 수도 있고 <body>, <table>에 대해 진입, 생성, 삭제 등을 할 수 있게 되는 것이다.
리모콘을 조작할 줄 알면 TV채널도 바꿀 수 있고 음량도 조절하는 등 편리하다.
하지만 조작법을 모른다면 어느정도 사용법을 익혀야할 것이다.
document도 마찬가지고 익혀야할 버튼들이 많다.
document는 수 많은 property(속성), method(함수)들로 이루어져 있기 때문이다.
이 많은 것을 한 번에 외우고 사용하기에는 시간적, 체력적으로 부담이 올 것이다.
그래서 차근차근 모르는 부분이 나올때마다 접근해 나가려한다.
MDN의 document에서는 DOM Tree, HTMLDocument, XMLDocument가 언급된다.
일단 가볍게 훑는 단계이므로 다음과 같이 이해하고 넘어가야겠다.
*DOM tree: HTML, XML 문서를 구성하는 태그들의 형태가 tree 구조라 붙은 명칭인거 같다. 그냥 HTML을 구성하는 tag 무리라고 생각해야지.
*HTMLDocument: Document는 웹페이지를 다루는 리모콘이라면 HTMLDocument는 HTML 문서를 다루는 리모콘이라고 볼 수 있는 것 같다. Document에 포함관계이지만 좀 더 상세한 접근, 조작을 위한 용도 같다.
*XMLDocument: HTMLDocument와 마찬가지로 Document에 포함관계인거 같다. XML 문서를 다루는 리모콘이라고 생각할 수 있을거 같다.
참고 사이트: developer.mozilla.org/en-US/docs/Web/API/Document
Document
The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.
developer.mozilla.org