BlockChain

1. WINDOW 객체 

2. DOM  (Document Object Model)

1. WINDOW 객체 

WINDOW 객체는 자바스크립트의 최상위 객체로 모든 객체가 소속된 객체이다. 

아래의 그림을 보면 WINDOW 객체 아래에 DOM, BOM, JavaScript가 최상위 객체인 WINDOW 객체 아래 소속되어 있다. 

우리가 어떠한 변수나 함수를 선언하게 되면 WINDOW 객체의 프로퍼티가 된다. 그 이유는 WINDOW객체는 최상위 객체로 모든 프로퍼티들을 포함하고 있다. 그래서 WINDOW.으로 시작하지 않아도 생략이 가능하다는 특징이 있다. 

하지만, let과 const 키워드로 선언한 변수는 블록스코프 이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역객체의 프로퍼티로 활용되기 어렵다.(scope에 대한 내용정리는 차후 공부 후... 예정)

2. DOM  (Document Object Model)

DOM : 문서 객체 모델 

문서 객체 모델 이란 객체지향 모델로 구조환 된 문서를 표현하는 형식이다. 텍스트 형식으로 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. HTML 코드를 작성할 시 body 안에 img태그에 src 경로를 걸어야 브라우저가 제대로 인식한다. 구조를 바꾸어 마음대로 코드를 작성한다면 브라우저가 코드를 인식하지 못해서 렌더링을 할 수 없다. 브라우저가 웹 문서를 이해할 수 있도록 구성된 것을 DOM이라고 한다.

즉 문서들을 순서대로 구조화하여 트리구조로 구성한 것이 DOM이라 할  수 있다. 

document는 DOM 트리의 최상위 객체이다. 브라우저가 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다. 그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다. 

document 객체의 역할은 

프로퍼티로 HTML의 전반적인 속성을 나타낸다. 

메서드로 DOM객체를 검색한다. 

메서드로 새로운 DOM 객체 생성

메서드로 HTML 문서의 전반적 제어를 지원한다.

document의 메서드 

2-1) getElementById() : 아이디명으로 첫 번째 DOM 객체 리턴 

. innerHTML 형식으로 ID를 리턴하면 root ID 아래의 문서들을 모두 반환한다.

반면, outerHTML 형식으로 ID를 리턴하면 root ID를 포함한 모든 문서들을 반환한다.

2-2) getElementsByTagName() : 특정 태그명을 가진 모든 태그 컬랙션 형태로 리턴

2-3) getElementsByClassName() : 특정 클래스명을 가진 모든 태그 컬랙션 형태로 리턴

2-4) open() : 콘텐츠를 모두 지우고 새로운 HTML 콘텐츠를 쓸 수 있도록 열기

2-5) write(), writeln() : document에 HTML 콘텐츠 삽입, ln 이 붙은 건 write() 후 '\n' 추가출력 (빈칸하나)

2-6) close() : document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하고, 더 이상 쓰기를 받지 않음

현재 브라우저에서 document.open() -> document.write() -> document.close() 순으로 하면 윈도우에 출력된 텍스트를 지우고 새로운 내용을 출력할 수 있다.