document interface

JS(javascript) 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 문서를 다루는 리모콘이라고 생각할 수 있을거 같다.

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

localStorage, JSON, stringfy, parse (0)	2020.11.24
setInterval (0)	2020.11.24
var, let (0)	2020.11.24
Date, innerHTML (0)	2020.11.23
querySelector (0)	2020.11.23

인생은 반복문