Javascript에서 창, 화면 및 문서의 차이점은 무엇입니까?
답변:
Windowglobal object브라우저에서 기본 JavaScript 객체 루트이며 문서 객체 모델의 루트로 취급 될 수도 있습니다. 당신은 그것을 액세스 할 수 있습니다window
window.screen또는 screen실제 화면 크기에 대한 작은 정보 개체 일뿐 입니다.
window.document또는 document잠재적으로 보이는 (또는 더 나은 : 렌더링 된) 문서 객체 모델 / DOM의 주요 객체 일뿐 입니다.
이후 window전역 객체는 당신은 속성 이름으로의 속성을 참조 할 수 있습니다 - 당신이 아래로 쓸 필요가 없습니다 window.- 그것은 런타임에 의해 파악 될 것이다.
window과 뷰포트 . A window는 브라우저 탭 또는 <iframe>(더 이상 사용되지 않는 <frame>) JavaScript 객체입니다 . 뷰포트 렌더링의 직사각형 document탭 또는 프레임 내에서 볼.
창은 브라우저에 가장 먼저로드됩니다. 이 윈도우 객체는 length, innerWidth, innerHeight, name, 닫힌 경우, 부모 등과 같은 대부분의 속성을 갖습니다.
그러면 문서 객체는 어떻습니까? 문서 객체는 html, aspx, php 또는 브라우저에로드 될 기타 문서입니다. 문서는 실제로 창 개체 안에로드되며 제목, URL, 쿠키 등과 같은 속성을 사용할 수 있습니다. 이것이 실제로 무엇을 의미합니까? 즉, 창의 속성에 액세스하려는 경우 window.property이며, 문서 인 경우 window.document.property이며 document.property로 간단히 사용할 수 있습니다.
충분히 간단 해 보입니다. 그러나 IFRAME이 도입되면 어떻게됩니까?
간단하게 아래에서 자세히 설명하면
window해당 컨텍스트의 JavaScript에 대한 실행 컨텍스트 및 글로벌 오브젝트입니다.documentHTML을 파싱하여 초기화 된 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.firstChilddocument.body.children[0]
screen
이 window객체 screen에는 물리적 디스플레이를 설명하는 속성 이있는 객체도 있습니다.
화면 속성
width과height전체 화면입니다화면 속성
availWidth및availHeight툴바 생략
렌더링 된 문서를 표시하는 화면 부분은 JavaScript 의 뷰포트 로, 운영 체제와의 상호 작용에 대해 이야기 할 때 화면의 응용 프로그램 부분을 창이라고 부르기 때문에 혼동 될 수 있습니다. getBoundingClientRect()어느 방법 document요소와 객체를 반환한다 top, left, bottom, 및 right뷰포트의 요소의 위치를 기술하는 속성.
window.onload문서 객체 를 사용 하는 것과 동등한 명령이 있습니까?
그만큼 window 실제 전역 객체이다.
그만큼 screen 화면은 사용자의 디스플레이에 대한 속성을 포함합니다.
는 documentDOM을이 곳입니다.
document또한 할 수있다 window.document, screen할 수있다 window.screen, 그리고 window할 수있다 window.window(또는 window.window.window- P)
window전역 변수 이기 때문에 전역 window개체 의 속성이 됩니다. :-)
에 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로 간단히 사용할 수 있습니다.