JS(javascript)

document interface

westone034626 2020. 11. 23. 16:12

*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다.

 

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