[javascript] Javascript에서 창, 화면 및 문서의 차이점은 무엇입니까?

JAVASCRIPT / 글쓴이

이 용어는 DOM의 전역 환경으로 상호 교환 가능하게 사용됩니다. 차이점은 무엇이며 (있는 경우) 언제 사용해야합니까?

답변

Windowglobal object브라우저에서 기본 JavaScript 객체 루트이며 문서 객체 모델의 루트로 취급 될 수도 있습니다. 당신은 그것을 액세스 할 수 있습니다window

window.screen또는 screen실제 화면 크기에 대한 작은 정보 개체 일뿐 입니다.

window.document또는 document잠재적으로 보이는 (또는 더 나은 : 렌더링 된) 문서 객체 모델 / DOM의 주요 객체 일뿐 입니다.

이후 window전역 객체는 당신은 속성 이름으로의 속성을 참조 할 수 있습니다 – 당신이 아래로 쓸 필요가 없습니다 window.– 그것은 런타임에 의해 파악 될 것이다.

답변

창은 브라우저에 가장 먼저로드됩니다. 이 윈도우 객체는 length, innerWidth, innerHeight, name, 닫힌 경우, 부모 등과 같은 대부분의 속성을 갖습니다.

그러면 문서 객체는 어떻습니까? 문서 객체는 html, aspx, php 또는 브라우저에로드 될 기타 문서입니다. 문서는 실제로 창 개체 안에로드되며 제목, URL, 쿠키 등과 같은 속성을 사용할 수 있습니다. 이것이 실제로 무엇을 의미합니까? 즉, 창의 속성에 액세스하려는 경우 window.property이며, 문서 인 경우 window.document.property이며 document.property로 간단히 사용할 수 있습니다.

돔

충분히 간단 해 보입니다. 그러나 IFRAME이 도입되면 어떻게됩니까?

iframe

답변

간단하게 아래에서 자세히 설명하면

  • window 해당 컨텍스트의 JavaScript에 대한 실행 컨텍스트 및 글로벌 오브젝트입니다.
  • document HTML을 파싱하여 초기화 된 DOM을 포함
  • screen 실제 디스플레이의 전체 화면을 설명합니다

참조 W3C 와 모질라 이러한 개체에 대한 자세한 내용은 참조. 세 사이의 가장 기본적인 관계는 각각의 브라우저 탭 자체를 가지고 있다는 것입니다 window, 그리고는 window가지고 window.document및 window.screen속성. 브라우저 탭의는 window그래서 글로벌 컨텍스트입니다 document및 screen참조 window.document하고 window.screen. Flanagan의 JavaScript : Definitive Guide 에 따르면 세 가지 객체에 대한 자세한 내용은 다음과 같습니다 .

window

각 브라우저 탭에는 고유 한 최상위 window개체가 있습니다. 각 <iframe>(그리고 더 이상 사용되지 않는 <frame>) 요소는 window부모 창 안에 중첩 된 자체 객체를 가지고 있습니다. 이 창들은 각각 별도의 전역 객체를 얻습니다. window.window항상을 의미 window하지만, window.parent및 window.top, 창을 둘러싸는 다른 실행 컨텍스트에 대한 액세스 권한을 부여 참조 할 수도 있습니다. 이외에도 document및 screen후술 window속성 포함

  • setTimeout()및 setInterval()타이머에 이벤트 처리기를 바인딩
  • location 현재 URL 제공
  • history메소드 back()와 forward()탭의 변경 가능 히스토리 제공
  • navigator 브라우저 소프트웨어 설명

document

각 window객체에는 document렌더링 할 객체가 있습니다. 고유 한 id가 할당 될 때 HTML 요소가 전역 객체에 추가되기 때문에 이러한 객체는 부분적으로 혼동됩니다. 예를 들어 HTML 스 니펫에서

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

단락 요소는 다음 중 하나에 의해 참조 될 수 있습니다.

  • window.holyCow 또는 window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

이 window객체 screen에는 물리적 디스플레이를 설명하는 속성 이있는 객체도 있습니다.

  • 화면 속성 width과 height전체 화면입니다

  • 화면 속성 availWidth및 availHeight툴바 생략

렌더링 된 문서를 표시하는 화면 부분은 JavaScript 의 뷰포트 로, 운영 체제와의 상호 작용에 대해 이야기 할 때 화면의 응용 프로그램 부분을 창이라고 부르기 때문에 혼동 될 수 있습니다. getBoundingClientRect()어느 방법 document요소와 객체를 반환한다 top, left, bottom, 및 right뷰포트의 요소의 위치를 기술하는 속성.

답변

그만큼 window 실제 전역 객체이다.

그만큼 screen 화면은 사용자의 디스플레이에 대한 속성을 포함합니다.

는 documentDOM을이 곳입니다.

답변

에 window모든 것이 포함되어 있으므로 해당 요소를 호출 window.screen하고 window.document가져올 수 있습니다 . 각 객체의 내용을 잘 인쇄 하여이 바이올린을 확인하십시오 : http://jsfiddle.net/JKirchartz/82rZu/

다음과 같이 firebug / dev 도구에서 객체의 내용을 볼 수도 있습니다.

console.dir(window);
console.dir(document);
console.dir(screen);

window모든 것의 근본이며 screen화면 크기 만 가지며 document최상위 DOM 객체입니다. 그래서 당신은 그것을 window슈퍼처럼 생각할 수 있습니다 document…

답변

창 은 브라우저에 가장 먼저로드됩니다. 이 윈도우 객체는 length, innerWidth, innerHeight, name, 닫힌 경우, 부모 등과 같은 대부분의 속성을 갖습니다.

문서 객체는 html, aspx, php 또는 브라우저에로드 될 기타 문서입니다. 문서는 실제로 창 개체 안에로드되며 제목, URL, 쿠키 등과 같은 속성을 사용할 수 있습니다. 이것이 실제로 무엇을 의미합니까? 즉, 윈도우의 속성에 액세스하려는 경우 window.property이며, 문서 인 경우 window.document.property이며 document.property로 간단히 사용할 수 있습니다.

답변