[노마드코더] 바닐라JS로 크롬 앱 만들기 - #1. Javascript on the Browser

1. The Document Object

1.1 document object

html과 js가 연결되면 js는 html에 접근하고 읽고 변경할 수 있도록 document라는 object를 자동 생성한다. 이 객체를 활용해 우리는 javascript를 활용해 html에 새로운 태그를 추가하거나 수정, 삭제, 식별자 부여 등의 작업을 할 수 있다. 정적 기능을 구현하고자 한다면 굳이 js를 활용할 필요는 없어보인다.

The Document Object
When an HTML document is loaded into a web browser, it becomes a document object.
The document object is the root node of the HTML document.
The document object is a property of the window object.
The document object is accessed with:
window.document or just document
- 출처 : https://www.w3schools.com/jsref/dom_obj_document.asp

 

1.2 console object

console object
객체는 브라우저의 디버깅 콘솔(Firefox, 웹 콘솔 등)에 접근할 수 있는 메서드를 제공합니다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.

- console.dir() : console.dir()은 요소를 JSON과 같은 트리구조로 출력하고 DOM JS 객체의 전체 표현을 보려고 할 때 유용하다. 그래서 객체는 dir, 나머지는 log로 로깅하면 편하다. 그런데 간혹 log로 로깅할 경우 내부에 이중, 삼중 객체 프로퍼티가 존재할 경우 해당 객체 내부를 확인하기 어려우므로 이 때 dir을 활용하면 좋다.

 

※ 특히!! Javascript에서 document 객체를 활용해 html을 수정할 때 dir을 활용하면 내가 수정할 부분(document 객체의 프로퍼티)를 알 수 있으므로 유용하다.

(참고 : https://sondho.tistory.com/50)

출처 : https://developer.mozilla.org/en-US/docs/Web/API/console/dir
주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다.

 

1.3 document object 관련 메소드

- document.querySelector() : document객체 내의 요소(element)를 css식별자를 활용해 호출할 때 사용

- eventTarget.addEventListener("event", callback f ) : dom에서 특정 이벤트 발생 시 불러올 callback 함수를 지정할 때 사용

 

2. 문서객체모델(DOM : Document Object Model)

- 참고 : https://poiemaweb.com/js-dom