[JavaScript] window&document 전역객체와 DOM

전역 window & document 객체

Built-in Variables & Functions

 

전역 변수로 코드 내에서 항상 사용할 수 있는 변수

 

 

window 객체

전역 객체

• window 전역 객체는 웹 브라우저 환경에서 전역으로 사용 가능한 객체를 나타낸다. 모든 전역 변수와 함수는 실제로 이 window 객체의 프로퍼티로 존재한다.

 

• window 객체의 프로퍼티와 메서드. 함수 기호 f가 표시된 것이 메서드이고 그렇지 않은 것은 프로퍼티이다.
• window 객체에 내장된 프로퍼티와 메서드들은 window. 없이도 액세스할 수 있다.
  • alert 메서드의 경우 window.alert()로도 사용할 수 있지만 그냥 alert()으로도 실행할 수 있는 것처럼 말이다.

 

윈도우와 브라우저 탭

• 윈도우는 웹 브라우저의 창(탭)을 의미한다. 각각의 웹사이트를 열 때마다 브라우저는 새로운 윈도우 객체를 생성한다. 따라서 여러 개의 탭이 열려 있다면 각각의 탭은 독립된 윈도우 객체를 갖게된다.

 

액세스와 보안 문제

• 보안상의 이유로, 하나의 웹페이지(탭)이 다른 웹페이지(탭)에 접근하거나 그 정보를 읽어오는 것은 제한되어 있다. 이는 다른 도메인의 스크립트가 서로의 정보에 접근하지 못하게 함으로써 보안을 유지하기 위해서이다. 이것을 Same Origin Policy(동일 출처 정책)이라고 한다.

 

일반적으로 보안 정책은 웹 페이지가 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근하는 것을 제한한다. 이는 브라우저가 사용자의 개인 정보를 보호하고, 악성 스크립트로부터 보호하기 위함이다.

 

따라서 현재 열려 있는 웹사이트 브라우저 탭에 접근할 때는 보안 정책을 준수하여 window 객체를 통해 접근해야 한다. 다른 탭의 정보에 직접 접근하는 것은 허용되지 않고 브라우저의 보안 정책에 따라 방지된다.

예를 들어, 현재 탭의 URL을 가져오거나, 새로운 탭을 열거나, 현재 페이지를 리로드 하는 등의 동작은 window 객체를 통해 수행할 수 있다.

 

 

 

document 객체

window.document

• document 객체는 window 객체 안에 내장되어 있는 중첩 객체이다.
• 웹 페이지의 구조는 HTML 문서로 표현되는데, 이 HTML 문서를 자바스크립트에서 조작하기 위해 DOM이 사용된다. DOM은 HTML 문서를 나타내는 트리 구조로, 각 HTML 요소는 객체로 표현된다. 이 때 최상위 객체가 document 객체이다.
• document 객체는 HTML 코드를 분석하고 이를 화면에 렌더링하는 역할을 한다.
  • HTML은 웹 브라우저에 의해 분석되고, 각각의 HTML 태그는 문서 객체로 변환된다. 이러한 변환을 통해 브라우저는 웹페이지의 컨텐츠를 스크린에 실제로 표시한다.
• document 객체에는 HTML 문서의 구조와 관련된 정보와 함수가 포함되어 있다. 이 객체를 통해 자바스크립트가 웹 페이지의 내용을 동적으로 조작할 수 있는 것이다.
  • ex. 특정 HTML 요소에 접근하고 해당 요소의 속성을 변경하거나, 새로운 HTML 요소를 생성하여 페이지에 추가할 수 있음

 

 

 

DOM이란?

Document Object Model의 약자로, 작성된 HTML 코드를 파싱하여 데이터와 브라우저의 내부를 표현하는 것을 설명해주는 역할을 한다.

 

 

HTML에서 DOM으로

DOM Tree

• 브라우저는 웹사이트를 불러오면 브라우저의 자바스크립트 엔진이 HTML 코드를 자바스크립트 객체 묶음으로 해석한다. 우리가 작성한 모든 HTML 요소는 자바스크립트 객체로 해석되고, 그 객체들은 HTML 구조를 나타내기 위해 서로 중첩이 된다.
• 다시 말하면, HTML 코드의 자바스크립트 표현이 있고 이 HTML 구조가 자바스크립트 객체의 구조로 변환되었기 때문에 자바스크립트 코드는 DOM과 상호작용할 수 있다.
• 이 DOM을 시작하는 것이 바로 document 객체이다. document 객체를 통해 DOM에 접근한다.

브라우저에서 HTML 코드를 바꾸거나 값을 추출하기 위해 파싱된 HTML 코드에 접근할 수 있는 방법이 필요하다. 이것이 바로 DOM이 필요한 이유이다. 자바스크립트 코드는 화면에서 일어나는 일에 접근해야 하기 때문이다.

 

콘솔에서 document 객체 살펴보기

• console.log(document)를 실행하면 전형적인 HTML 코드처럼 보인다. 하지만 document 객체 안에는 HTML 코드가 없다. 진짜 자바스크립트 객체를 보려면 console.dir(document)를 실행하면 된다.

 

 

 

참고 - 자바스크립트 엔진과 렌더링 엔진

1. 자바스크립트 엔진 (JavaScript Engine)
   • 웹 페이지에 포함된 자바스크립트 코드를 실행하는 역할을 한다.
   • V8 엔진이나 SpiderMonkey 등이 있다.
   • 자바스크립트 엔진은 HTML 문서 안에 삽입된 <script> 태그 내의 자바스크립트 코드를 해석하고 실행한다. 이때, DOM(Document Object Model)을 생성하고, 웹 페이지의 동적인 요소들을 조작하는데 사용된다.
2. 렌더링 엔진 (Rendering Engine)
   • HTML과 CSS를 해석하고 웹 페이지를 화면에 렌더링하는 역할을 한다.
   • Blink(Chrome), Gecko(Firefox), WebKit(Safari) 등이 있다.
   • 렌더링 엔진은 HTML과 CSS를 화면에 표시할 수 있는 그래픽 형태로 변환한다. 이 과정에서 DOM 트리와 CSS 스타일 규칙을 사용하여 웹 페이지의 레이아웃을 구성하고 최종적으로 화면에 표시한다.

자바스크립트 엔진과 렌더링 엔진은 서로 독립적으로 동작하지만, 둘 사이에는 연계성이 있다. 예를 들어, 자바스크립트 코드가 실행되면 DOM이 변경될 수 있고, 이 변경 사항은 다시 렌더링 엔진에 의해 반영되어 화면에 새로운 내용이 나타날 수 있다.